From 41433dcbb4d274f318e7223f5ceb0d460a120439 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 24 Jun 2025 17:01:05 -0500
Subject: [PATCH] Add fallback timing debugging

---
 src/components/image/ImageWithFallback.tsx | 25 +++++++++++++++-------
 src/photo/PhotoDetailPage.tsx              |  1 +
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx
index 7ff45e0d..ffc595bd 100644
--- a/src/components/image/ImageWithFallback.tsx
+++ b/src/components/image/ImageWithFallback.tsx
@@ -44,7 +44,20 @@ export default function ImageWithFallback({
     );
   }, []);
 
-  const shouldDebugFallback = areAdminDebugToolsEnabled && debug;
+  const shouldDebugFallbackTiming = areAdminDebugToolsEnabled && debug;
+
+  const showFallback =
+    !wasCached &&
+    !hideFallback;
+
+  if (shouldDebugFallbackTiming) {
+    console.log({
+      isLoading,
+      wasCached,
+      hideFallback,
+      showFallback,
+    });
+  }
 
   const debugFallbackStyles = useCallback(() => {
     const stylesMap = refFallback.current?.computedStyleMap();
@@ -77,7 +90,7 @@ export default function ImageWithFallback({
           if (fallbackOpacity === 0) {
             // Image has loaded and fallback is already hidden
             setHideFallback(true);
-            if (shouldDebugFallback) {
+            if (shouldDebugFallbackTiming) {
               console.log('Hide fallback: 01', debugFallbackStyles());
             }
           } else {
@@ -85,7 +98,7 @@ export default function ImageWithFallback({
             // Delay hiding fallback to avoid abrupt transition
             innerTimeout.current = setTimeout(() =>{
               setHideFallback(true);
-              if (shouldDebugFallback) {
+              if (shouldDebugFallbackTiming) {
                 console.log('Hide fallback: 02', debugFallbackStyles());
               }
             }, 1000);
@@ -100,14 +113,10 @@ export default function ImageWithFallback({
   }, [
     isLoading,
     didError,
-    shouldDebugFallback,
+    shouldDebugFallbackTiming,
     debugFallbackStyles,
   ]);
 
-  const showFallback =
-    !wasCached &&
-    !hideFallback;
-
   const getBlurClass = () => {
     switch (blurCompatibilityLevel) {
     case 'high':
diff --git a/src/photo/PhotoDetailPage.tsx b/src/photo/PhotoDetailPage.tsx
index e257eea7..821c6d40 100644
--- a/src/photo/PhotoDetailPage.tsx
+++ b/src/photo/PhotoDetailPage.tsx
@@ -142,6 +142,7 @@ export default function PhotoDetailPage({
             shouldShareFocalLength={focal !== undefined}
             includeFavoriteInAdminMenu={includeFavoriteInAdminMenu}
             showAdminKeyCommands
+            debugImageFallback
           />,
         ]}
       />