fix: image blurhash out when image loaded

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Jan 2, 2025 · 5b237ca · 5b237ca
1 parent 045d6c7
commit 5b237ca
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/apps/renderer/src/components/ui/media.tsx b/apps/renderer/src/components/ui/media.tsx
@@ -274,7 +274,12 @@ const MediaImpl: FC<MediaProps> = ({
             }}
           >
             {props.blurhash && (
-              <span className="absolute inset-0 overflow-hidden rounded">
+              <span
+                className={cn(
+                  "absolute inset-0 overflow-hidden rounded",
+                  mediaLoadState === "loaded" && "animate-out fade-out-0 fill-mode-forwards",
+                )}
+              >
                 <BlurhashCanvas hash={props.blurhash} className="size-full" />
               </span>
             )}
@@ -299,7 +304,10 @@ const MediaImpl: FC<MediaProps> = ({
           fitContent={fitContent}
         >
           <div
-            className="absolute inset-0 flex items-center justify-center overflow-hidden rounded"
+            className={cn(
+              "absolute inset-0 flex items-center justify-center overflow-hidden rounded",
+              mediaLoadState === "loaded" && "animate-out fade-out-0 fill-mode-forwards",
+            )}
             data-blurhash={blurhash}
           >
             {blurhash ? (