From f2db4cf4d06bd1acfeedda03a80fb2b0e42095e8 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 16 Jul 2025 09:37:48 -0500
Subject: [PATCH] Add additional image fallback loading checks

---
 src/components/image/ImageWithFallback.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx
index f67fe62e..489cc2c2 100644
--- a/src/components/image/ImageWithFallback.tsx
+++ b/src/components/image/ImageWithFallback.tsx
@@ -20,6 +20,8 @@ export default function ImageWithFallback({
   classNameImage?: string
   forceFallbackFade?: boolean
 }) {
+  const ref = useRef<HTMLImageElement>(null);
+
   const { shouldDebugImageFallbacks } = useAppState();
 
   const [isLoading, setIsLoading] = useState(true);
@@ -30,15 +32,16 @@ export default function ImageWithFallback({
   const onLoad = useCallback(() => setIsLoading(false), []);
   const onError = useCallback(() => setDidError(true), []);
 
-  const isLoadingRef = useRef(isLoading);
-  useEffect(() => { isLoadingRef.current = isLoading; }, [isLoading]);
   useEffect(() => {
     const timeout = setTimeout(() => {
-      // If image is still loading after 100ms, force CSS animation
-      if (isLoadingRef.current) {
+      // If image is still loading after 50ms, force CSS animation
+      if (
+        !ref.current?.complete ||
+        (ref.current?.naturalWidth ?? 0) === 0
+      ) {
         setFadeFallbackTransition(true);
       }
-    }, 100);
+    }, 50);
     return () => clearTimeout(timeout);
   }, []);
 
@@ -59,7 +62,7 @@ export default function ImageWithFallback({
         className,
       )}
     >
-      <Image {...{
+      <Image ref={ref} {...{
         ...props,
         priority,
         className: classNameImage,