From a505f7c5e451691fb5d97759e0560a9595cbedef Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 15 Apr 2023 12:26:11 +0800
Subject: [PATCH] Fix media not loading if status is not cached

---
 src/app.css          | 18 ++++++++++--------
 src/pages/status.jsx |  6 +++---
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app.css b/src/app.css
index 48118211..7b90e1d5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -804,14 +804,6 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   flex-grow: 1;
   /* backdrop-filter: saturate(0.75); */
 }
-.deck-backdrop > .deck-loader {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  backdrop-filter: blur(24px);
-  background-image: radial-gradient(closest-side, var(--bg-color), transparent);
-}
 @keyframes slide-in {
   0% {
     transform: translate3d(100%, 0, 0);
@@ -902,6 +894,16 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   backdrop-filter: blur(24px);
   animation: appear 0.3s var(--timing-function) both;
 }
+.media-modal-container.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: radial-gradient(
+    closest-side,
+    var(--bg-blur-color),
+    transparent
+  );
+}
 
 .carousel {
   display: flex;
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 3939a77b..4e8b801a 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -86,7 +86,7 @@ function StatusPage() {
         }
       })();
     }
-  }, []);
+  }, [showMedia]);
 
   const mediaAttachments = mediaStatusID
     ? mediaStatus?.mediaAttachments
@@ -112,8 +112,8 @@ function StatusPage() {
             }}
           />
         ) : (
-          <div class="deck-loader">
-            <Loader />
+          <div class="media-modal-container loading">
+            <Loader abrupt />
           </div>
         )
       ) : (