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

Mitigate image flickering

Browse Source
This commit is contained in:
Sam Becker 2024-03-15 10:51:42 -05:00
parent e0f18171c0
commit 195569730f
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ImageBlurFallback.tsx
View File

@ -4,7 +4,7 @@
import { BLUR_ENABLED } from '@/site/config'; import { BLUR_ENABLED } from '@/site/config';
import { clsx} from 'clsx/lite'; import { clsx} from 'clsx/lite';
import Image, { ImageProps } from 'next/image'; import Image, { ImageProps } from 'next/image';
import { useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
export default function ImageBlurFallback(props: ImageProps) { export default function ImageBlurFallback(props: ImageProps) {
const { const {
@ -18,6 +18,9 @@ export default function ImageBlurFallback(props: ImageProps) {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [didError, setDidError] = useState(false); const [didError, setDidError] = useState(false);
const onLoad = useCallback(() => setIsLoading(false), []);
const onError = useCallback(() => setDidError(true), []);
const [hideBlurPlaceholder, setHideBlurPlaceholder] = useState(false); const [hideBlurPlaceholder, setHideBlurPlaceholder] = useState(false);
const imageClassName = 'object-cover h-full'; const imageClassName = 'object-cover h-full';
@ -80,8 +83,8 @@ export default function ImageBlurFallback(props: ImageProps) {
ref: imgRef, ref: imgRef,
priority, priority,
className: imageClassName, className: imageClassName,
onLoad: () => setIsLoading(false), onLoad,
onError: () => setDidError(true), onError,
}} /> }} />
</div> </div>
); );