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 [didError, setDidError] = useState(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 onLoad = useCallback(() => setIsLoading(false), []);
const onError = useCallback(() => setDidError(true), []);
const [hideFallback, setHideFallback] = useState(false);
@ -43,7 +33,11 @@ export default function ImageWithFallback({
useEffect(() => {
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,
);
return () => clearTimeout(timeout);