Always fade in images on first load

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<HTMLImageElement>(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), []);

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}
         />
       </ZoomControls>
       <div className={clsx(

src/photo/PhotoMedium.tsx

@@ -21,7 +21,6 @@ export default function PhotoMedium({
   priority,
   prefetch = SHOULD_PREFETCH_ALL_LINKS,
   className,
-  forceFallbackFade,
   onVisible,
   ...categories
 }: {
@@ -30,7 +29,6 @@ export default function PhotoMedium({
   priority?: boolean
   prefetch?: boolean
   className?: string
-  forceFallbackFade?: boolean
   onVisible?: () => void
 } & PhotoSetCategory) {
   const ref = useRef<HTMLAnchorElement>(null);
@@ -68,7 +66,6 @@ export default function PhotoMedium({
             classNameImage="object-cover w-full h-full"
             alt={altTextForPhoto(photo)}
             priority={priority}
-            forceFallbackFade={forceFallbackFade}
           />
         </div>}
     </LinkWithStatus>

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<HTMLAnchorElement>(null);
@@ -52,7 +50,6 @@ export default function PhotoSmall({
         blurDataURL={photo.blurData}
         blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
         alt={altTextForPhoto(photo)}
-        forceFallbackFade={forceFallbackFade}
       />
     </Link>
   );