diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx index 2a3bc371..b2328293 100644 --- a/src/components/image/ImageWithFallback.tsx +++ b/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(() => { - isLoadingRef.current = isLoading; - }, [isLoading]); - + useEffect(() => { 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); }, []); diff --git a/src/photo/PhotoDetailPage.tsx b/src/photo/PhotoDetailPage.tsx index 821c6d40..e257eea7 100644 --- a/src/photo/PhotoDetailPage.tsx +++ b/src/photo/PhotoDetailPage.tsx @@ -142,7 +142,6 @@ export default function PhotoDetailPage({ shouldShareFocalLength={focal !== undefined} includeFavoriteInAdminMenu={includeFavoriteInAdminMenu} showAdminKeyCommands - debugImageFallback />, ]} /> diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index 52b7c335..f48273d4 100644 --- a/src/photo/PhotoLarge.tsx +++ b/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(null); const refZoomControls = useRef(null); @@ -226,7 +224,6 @@ export default function PhotoLarge({ blurDataURL={photo.blurData} blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)} priority={priority} - debug={debugImageFallback} />
void revalidatePhoto?: RevalidatePhoto - debugImageFallback?: boolean }) { return ( )} itemKeys={photos.map(photo => photo.id)} /> diff --git a/src/photo/PhotosLargeInfinite.tsx b/src/photo/PhotosLargeInfinite.tsx index 22757bc0..40631291 100644 --- a/src/photo/PhotosLargeInfinite.tsx +++ b/src/photo/PhotosLargeInfinite.tsx @@ -23,7 +23,6 @@ export default function PhotosLargeInfinite({ photos={photos} onLastPhotoVisible={onLastPhotoVisible} revalidatePhoto={revalidatePhoto} - debugImageFallback={false} />} );