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

Adjust image fallback cache behavior

Browse Source
This commit is contained in:
Sam Becker 2025-04-04 23:35:11 -05:00
parent b6a5a0c5da
commit 54c7b04d48
1 changed files with 3 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import { BLUR_ENABLED } from '@/app/config';
import { useAppState } from '@/state/AppState';
import { clsx} from 'clsx/lite';
import Image, { ImageProps } from 'next/image';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
export default function ImageWithFallback(props: ImageProps & {
blurCompatibilityLevel?: 'none' | 'low' | 'high'
@ -22,7 +22,7 @@ export default function ImageWithFallback(props: ImageProps & {
const { shouldDebugImageFallbacks } = useAppState();
const [wasCached, setWasCached] = useState(true);
const [wasCached, setWasCached] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [didError, setDidError] = useState(false);
@ -31,16 +31,6 @@ export default function ImageWithFallback(props: ImageProps & {
const [hideFallback, setHideFallback] = useState(false);
const imgRef = useRef<HTMLImageElement>(null);
useEffect(() => {
const timeout = setTimeout(
() => setWasCached(imgRef.current?.complete ?? false),
100,
);
return () => clearTimeout(timeout);
}, []);
useEffect(() => {
if (!isLoading && !didError) {
const timeout = setTimeout(() => {
@ -98,7 +88,7 @@ export default function ImageWithFallback(props: ImageProps & {
</div>}
<Image {...{
...rest,
ref: imgRef,
ref: (element) => setWasCached(element?.complete ?? false),
priority,
className: classNameImage,
onLoad,