fix(app): fade the picker thumbhash out instead of fading images in (#1946)

fluxer_app/src/features/channel/components/pickers/shared/PickerThumbnail.tsx

@@ -2,9 +2,11 @@
 
 import Accessibility from '@app/features/accessibility/state/Accessibility';
 import {useMediaLoading} from '@app/features/messaging/hooks/useMediaLoading';
-import {motion} from 'framer-motion';
+import {AnimatePresence, motion} from 'framer-motion';
 import {observer} from 'mobx-react-lite';
-import type {FC} from 'react';
+import type {CSSProperties, FC} from 'react';
+
+const PLACEHOLDER_OVERLAY_STYLE: CSSProperties = {position: 'absolute', inset: 0};
 
 interface PickerThumbnailProps {
 	src: string;
@@ -16,37 +18,37 @@ interface PickerThumbnailProps {
 
 export const PickerThumbnail: FC<PickerThumbnailProps> = observer(
 	({src, alt, className, thumbHashClassName, placeholder}) => {
-		const {loaded, error, cachedOnMount, thumbHashURL, ref, onLoad, onError} = useMediaLoading(
+		const {loaded, error, thumbHashURL, ref, onLoad, onError} = useMediaLoading(src, placeholder ?? undefined);
-			src,
-			placeholder ?? undefined,
-		);
 		const showThumbHash = (!loaded || error) && Boolean(thumbHashURL);
 		return (
 			<>
-				{showThumbHash && (
+				{!error && (
 					<img
+						src={src}
+						ref={ref}
+						alt={alt}
+						className={className}
+						onLoad={onLoad}
+						onError={onError}
+						data-flx="channel.pickers.picker-thumbnail.img--2"
+					/>
+				)}
+				<AnimatePresence data-flx="channel.pickers.picker-thumbnail.animate-presence">
+					{showThumbHash && (
+						<motion.img
+							key="thumb-hash"
 							src={thumbHashURL}
 							alt=""
 							aria-hidden
 							className={thumbHashClassName ?? className}
+							style={PLACEHOLDER_OVERLAY_STYLE}
+							initial={{opacity: 1}}
+							exit={{opacity: 0}}
+							transition={{duration: Accessibility.useReducedMotion ? 0 : 0.2}}
 							data-flx="channel.pickers.picker-thumbnail.img"
 						/>
 					)}
-				{!error && (
+				</AnimatePresence>
-					<motion.img
-						src={src}
-						ref={ref}
-						alt={alt}
-						loading="lazy"
-						className={className}
-						onLoad={onLoad}
-						onError={onError}
-						initial={{opacity: cachedOnMount ? 1 : 0}}
-						animate={{opacity: loaded ? 1 : 0}}
-						transition={{duration: cachedOnMount || Accessibility.useReducedMotion ? 0 : 0.2}}
-						data-flx="channel.pickers.picker-thumbnail.img--2"
-					/>
-				)}
 			</>
 		);
 	},