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

Make sure images load before hiding fallback

Browse Source
This commit is contained in:
Sam Becker 2025-04-27 15:55:30 -05:00
parent a8378fada9
commit 7c6e8371b8
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,17 @@ export default function ImageWithFallback({
const [isLoading, setIsLoading] = useState(true);
const [didError, setDidError] = useState(false);
const onLoad = useCallback(() => setIsLoading(false), []);
const onLoad = useCallback(() => {
// 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 [hideFallback, setHideFallback] = useState(false);