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

Update image fallback loading check

Browse Source
This commit is contained in:
Sam Becker 2025-04-27 16:30:02 -05:00
parent f98be60ea6
commit 63dcab09e5
1 changed files with 6 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,17 +24,7 @@ export default function ImageWithFallback({
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [didError, setDidError] = useState(false); const [didError, setDidError] = useState(false);
const onLoad = useCallback(() => { const onLoad = useCallback(() => setIsLoading(false), []);
// Prevent blank flash by waiting for image to load
if (
imgRef.current?.complete &&
(imgRef.current?.naturalWidth ?? 0) > 0
) {
setIsLoading(false);
} else {
setTimeout(() => setIsLoading(false), 100);
}
}, []);
const onError = useCallback(() => setDidError(true), []); const onError = useCallback(() => setDidError(true), []);
const [hideFallback, setHideFallback] = useState(false); const [hideFallback, setHideFallback] = useState(false);
@ -43,7 +33,11 @@ export default function ImageWithFallback({
useEffect(() => { useEffect(() => {
const timeout = setTimeout( const timeout = setTimeout(
() => setWasCached(imgRef.current?.complete ?? false), // Prevent blank flash by waiting for image to load
() => setWasCached(
Boolean(imgRef.current?.complete) &&
(imgRef.current?.naturalWidth ?? 0) > 0,
),
100, 100,
); );
return () => clearTimeout(timeout); return () => clearTimeout(timeout);