diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx index 9e33ba95..ad265c11 100644 --- a/src/components/image/ImageWithFallback.tsx +++ b/src/components/image/ImageWithFallback.tsx @@ -10,7 +10,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'; export default function ImageWithFallback({ className, classNameImage = 'object-cover h-full', - forceFallbackFade = false, blurDataURL, blurCompatibilityLevel = 'low', priority, @@ -18,16 +17,15 @@ export default function ImageWithFallback({ }: ImageProps & { blurCompatibilityLevel?: 'none' | 'low' | 'high' classNameImage?: string - forceFallbackFade?: boolean }) { const ref = useRef(null); - const { shouldDebugImageFallbacks } = useAppState(); + const { hasLoadedWithAnimations, shouldDebugImageFallbacks } = useAppState(); const [isLoading, setIsLoading] = useState(true); const [didError, setDidError] = useState(false); const [fadeFallbackTransition, setFadeFallbackTransition] = - useState(forceFallbackFade); + useState(!hasLoadedWithAnimations); const onLoad = useCallback(() => setIsLoading(false), []); const onError = useCallback(() => setDidError(true), []); diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index 5e2a8e76..56033a4c 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -80,7 +80,6 @@ export default function PhotoLarge({ shouldShareRecipe, shouldShareFocalLength, includeFavoriteInAdminMenu, - forceFallbackFade, onVisible, showAdminKeyCommands, }: { @@ -111,7 +110,6 @@ export default function PhotoLarge({ shouldShareRecipe?: boolean shouldShareFocalLength?: boolean includeFavoriteInAdminMenu?: boolean - forceFallbackFade?: boolean onVisible?: () => void showAdminKeyCommands?: boolean }) { @@ -234,7 +232,6 @@ export default function PhotoLarge({ blurDataURL={photo.blurData} blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)} priority={priority} - forceFallbackFade={forceFallbackFade} />
void } & PhotoSetCategory) { const ref = useRef(null); @@ -68,7 +66,6 @@ export default function PhotoMedium({ classNameImage="object-cover w-full h-full" alt={altTextForPhoto(photo)} priority={priority} - forceFallbackFade={forceFallbackFade} />
} diff --git a/src/photo/PhotoSmall.tsx b/src/photo/PhotoSmall.tsx index 57f0552f..ebcae414 100644 --- a/src/photo/PhotoSmall.tsx +++ b/src/photo/PhotoSmall.tsx @@ -17,7 +17,6 @@ export default function PhotoSmall({ selected, className, prefetch = SHOULD_PREFETCH_ALL_LINKS, - forceFallbackFade, onVisible, ...categories }: { @@ -25,7 +24,6 @@ export default function PhotoSmall({ selected?: boolean className?: string prefetch?: boolean - forceFallbackFade?: boolean onVisible?: () => void } & PhotoSetCategory) { const ref = useRef(null); @@ -52,7 +50,6 @@ export default function PhotoSmall({ blurDataURL={photo.blurData} blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)} alt={altTextForPhoto(photo)} - forceFallbackFade={forceFallbackFade} /> );