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(
-			src,
-			placeholder ?? undefined,
-		);
+		const {loaded, error, thumbHashURL, ref, onLoad, onError} = useMediaLoading(src, placeholder ?? undefined);
 		const showThumbHash = (!loaded || error) && Boolean(thumbHashURL);
 		return (
 			<>
-				{showThumbHash && (
-					<img
-						src={thumbHashURL}
-						alt=""
-						aria-hidden
-						className={thumbHashClassName ?? className}
-						data-flx="channel.pickers.picker-thumbnail.img"
-					/>
-				)}
 				{!error && (
-					<motion.img
+					<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"
 					/>
 				)}
+				<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"
+						/>
+					)}
+				</AnimatePresence>
 			</>
 		);
 	},