diff --git a/fluxer_app/src/features/channel/components/pickers/shared/PickerThumbnail.tsx b/fluxer_app/src/features/channel/components/pickers/shared/PickerThumbnail.tsx index 02c0f5439..919d563cc 100644 --- a/fluxer_app/src/features/channel/components/pickers/shared/PickerThumbnail.tsx +++ b/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 = 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 && ( - - )} {!error && ( - )} + + {showThumbHash && ( + + )} + ); },