strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Check fallback fade/image load status on mount

Browse Source
This commit is contained in:
Sam Becker 2025-07-16 17:35:09 -05:00
parent f2db4cf4d0
commit 2dde902027
1 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/image/ImageWithFallback.tsx
View File

@ -33,16 +33,12 @@ export default function ImageWithFallback({
const onError = useCallback(() => setDidError(true), []); const onError = useCallback(() => setDidError(true), []);
useEffect(() => { useEffect(() => {
const timeout = setTimeout(() => { if (
// If image is still loading after 50ms, force CSS animation !ref.current?.complete ||
if ( (ref.current?.naturalWidth ?? 0) === 0
!ref.current?.complete || ) {
(ref.current?.naturalWidth ?? 0) === 0 setFadeFallbackTransition(true);
) { }
setFadeFallbackTransition(true);
}
}, 50);
return () => clearTimeout(timeout);
}, []); }, []);
const getBlurClass = () => { const getBlurClass = () => {