Remove obsolete debug props

src/components/image/ImageWithFallback.tsx

@@ -7,9 +7,6 @@ import { clsx}  from 'clsx/lite';
 import Image, { ImageProps } from 'next/image';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-// If image is still loading after 200ms, force CSS animation
-const FALLBACK_FADE_CUTOFF = 200;
-
 export default function ImageWithFallback({
   className,
   classNameImage = 'object-cover h-full',
@@ -19,7 +16,6 @@ export default function ImageWithFallback({
 }: ImageProps & {
   blurCompatibilityLevel?: 'none' | 'low' | 'high'
   classNameImage?: string
-  debug?: boolean
 }) {
   const { shouldDebugImageFallbacks } = useAppState();
 
@@ -31,17 +27,14 @@ export default function ImageWithFallback({
   const onError = useCallback(() => setDidError(true), []);
 
   const isLoadingRef = useRef(isLoading);
-  useEffect(() => {
+  useEffect(() => { isLoadingRef.current = isLoading; }, [isLoading]);
-    isLoadingRef.current = isLoading;
-  }, [isLoading]);
-
   useEffect(() => {
     const timeout = setTimeout(() => {
-      // If image is still loading, force CSS animation
+      // If image is still loading after 200ms, force CSS animation
       if (isLoadingRef.current) {
         setFadeFallbackTransition(true);
       }
-    }, FALLBACK_FADE_CUTOFF);
+    }, 200);
     return () => clearTimeout(timeout);
   }, []);
 

src/photo/PhotoDetailPage.tsx

@@ -142,7 +142,6 @@ export default function PhotoDetailPage({
             shouldShareFocalLength={focal !== undefined}
             includeFavoriteInAdminMenu={includeFavoriteInAdminMenu}
             showAdminKeyCommands
-            debugImageFallback
           />,
         ]}
       />

src/photo/PhotoLarge.tsx

@@ -78,7 +78,6 @@ export default function PhotoLarge({
   includeFavoriteInAdminMenu,
   onVisible,
   showAdminKeyCommands,
-  debugImageFallback,
 }: {
   photo: Photo
   className?: string
@@ -105,7 +104,6 @@ export default function PhotoLarge({
   includeFavoriteInAdminMenu?: boolean
   onVisible?: () => void
   showAdminKeyCommands?: boolean
-  debugImageFallback?: boolean
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const refZoomControls = useRef<ZoomControlsRef>(null);
@@ -226,7 +224,6 @@ export default function PhotoLarge({
           blurDataURL={photo.blurData}
           blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
           priority={priority}
-          debug={debugImageFallback}
         />
       </ZoomControls>
       <div className={clsx(

src/photo/PhotosLarge.tsx

@@ -9,14 +9,12 @@ export default function PhotosLarge({
   prefetchFirstPhotoLinks,
   onLastPhotoVisible,
   revalidatePhoto,
-  debugImageFallback = true,
 }: {
   photos: Photo[]
   animate?: boolean
   prefetchFirstPhotoLinks?: boolean
   onLastPhotoVisible?: () => void
   revalidatePhoto?: RevalidatePhoto
-  debugImageFallback?: boolean
 }) {
   return (
     <AnimateItems
@@ -37,7 +35,6 @@ export default function PhotosLarge({
           onVisible={index === photos.length - 1
             ? onLastPhotoVisible
             : undefined}
-          debugImageFallback={debugImageFallback && index === 0}
         />)}
       itemKeys={photos.map(photo => photo.id)}
     />

src/photo/PhotosLargeInfinite.tsx

@@ -23,7 +23,6 @@ export default function PhotosLargeInfinite({
           photos={photos}
           onLastPhotoVisible={onLastPhotoVisible}
           revalidatePhoto={revalidatePhoto}
-          debugImageFallback={false}
         />}
     </InfinitePhotoScroll>
   );