Revert "fix(ux): improve image loading more smooth (RSSNext#968)"

This reverts commit 7f51372.
konata33 · Oct 18, 2024 · 3ebe23b · 3ebe23b
1 parent 7e1767d
commit 3ebe23b
Showing 1 changed file with 3 additions and 9 deletions.
diff --git a/apps/renderer/src/components/ui/media/preview-media.tsx b/apps/renderer/src/components/ui/media/preview-media.tsx
@@ -295,14 +295,9 @@ const FallbackableImage: FC<
   const width = Number.parseInt(props.width as string)
   return (
     <div className={cn("center flex size-full flex-col", containerClassName)}>
-      {!isAllError && (
+      {isLoading && !isAllError && (
         // FIXME: optimize this if image load, the placeholder background will flash
-        <div
-          className={cn(
-            "center absolute inset-0 size-full transition-opacity duration-700",
-            isLoading ? "opacity-100" : "opacity-0",
-          )}
-        >
+        <div className="center absolute inset-0 size-full">
           {blurhash ? (
             <div style={{ aspectRatio: `${props.width} / ${props.height}` }} className="w-full">
               <Blurhash hash={blurhash} resolutionX={32} resolutionY={32} className="!size-full" />
@@ -322,8 +317,7 @@ const FallbackableImage: FC<
           width={props.width}
           {...props}
           className={cn(
-            "transition-opacity duration-700",
-            isLoading ? "opacity-0" : "opacity-100",
+            blurhash && !isLoading ? "duration-500 ease-in-out animate-in fade-in-0" : "",
             props.className,
           )}
           style={