From 6c50245550914f4a91c17960fa6661431cc9e79c Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 24 Jun 2025 21:29:48 -0500
Subject: [PATCH] Refine fallback fade logic

---
 src/components/image/ImageWithFallback.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx
index 51f47e85..b49d3d6d 100644
--- a/src/components/image/ImageWithFallback.tsx
+++ b/src/components/image/ImageWithFallback.tsx
@@ -34,7 +34,7 @@ export default function ImageWithFallback({
   const onLoad = useCallback(() => setIsLoading(false), []);
   const onError = useCallback(() => setDidError(true), []);
 
-  const [forceFallbackFade, setForceFallbackFade] = useState(false);
+  const [fadeFallbackTransition, setFadeFallbackTransition] = useState(false);
   const [hideFallback, setHideFallback] = useState(false);
 
   const refImage = useRef<HTMLImageElement>(null);
@@ -58,7 +58,7 @@ export default function ImageWithFallback({
     const timeout = setTimeout(() => {
       // If image is still loading, force CSS animation
       if (isLoadingRef.current) {
-        setForceFallbackFade(true);
+        setFadeFallbackTransition(true);
       }
     }, FALLBACK_FADE_CUTOFF);
     return () => clearTimeout(timeout);
@@ -84,9 +84,9 @@ export default function ImageWithFallback({
       wasCached: wasCachedRef.current,
       hideFallback,
       showFallback,
-      forceFallbackFade,
-      classes: refFallback.current?.classList,
+      forceFallbackFade: fadeFallbackTransition,
     });
+    console.log(refFallback.current?.classList.toString());
   }
 
   const debugFallbackStyles = useCallback(() => {
@@ -178,7 +178,7 @@ export default function ImageWithFallback({
           '@container',
           'absolute inset-0 pointer-events-none',
           'overflow-hidden',
-          ((showFallback && !forceFallbackFade) || shouldDebugImageFallbacks) &&
+          (showFallback || fadeFallbackTransition) &&
             'transition-opacity duration-300 ease-in',
           !(BLUR_ENABLED && blurDataURL) && 'bg-main',
           (isLoading || shouldDebugImageFallbacks)