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

Add additional image fallback loading checks

Browse Source
This commit is contained in:
Sam Becker 2025-07-16 09:37:48 -05:00
parent 25533f088c
commit f2db4cf4d0
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,8 @@ export default function ImageWithFallback({
classNameImage?: string
forceFallbackFade?: boolean
}) {
const ref = useRef<HTMLImageElement>(null);
const { shouldDebugImageFallbacks } = useAppState();
const [isLoading, setIsLoading] = useState(true);
@ -30,15 +32,16 @@ export default function ImageWithFallback({
const onLoad = useCallback(() => setIsLoading(false), []);
const onError = useCallback(() => setDidError(true), []);
const isLoadingRef = useRef(isLoading);
useEffect(() => { isLoadingRef.current = isLoading; }, [isLoading]);
useEffect(() => {
const timeout = setTimeout(() => {
// If image is still loading after 100ms, force CSS animation
if (isLoadingRef.current) {
// If image is still loading after 50ms, force CSS animation
if (
!ref.current?.complete ||
(ref.current?.naturalWidth ?? 0) === 0
) {
setFadeFallbackTransition(true);
}
}, 100);
}, 50);
return () => clearTimeout(timeout);
}, []);
@ -59,7 +62,7 @@ export default function ImageWithFallback({
className,
)}
>
<Image {...{
<Image ref={ref} {...{
...props,
priority,
className: classNameImage,