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

Hybrid approach for placeholder with/without blur data

Browse Source
This commit is contained in:
Sam Becker 2024-02-23 19:33:05 -06:00
parent 941af6af09
commit 2c4bdd8003
1 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/ImageBlurFallback.tsx
View File

@ -18,7 +18,7 @@ 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 [hideBluePlaceholder, setHideBluePlaceholder] = useState(false); const [hideBlurPlaceholder, setHideBlurPlaceholder] = useState(false);
const imageClassName = 'object-cover h-full'; const imageClassName = 'object-cover h-full';
@ -35,39 +35,45 @@ export default function ImageBlurFallback(props: ImageProps) {
useEffect(() => { useEffect(() => {
if (!isLoading && !didError) { if (!isLoading && !didError) {
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
setHideBluePlaceholder(true); setHideBlurPlaceholder(true);
}, 1000); }, 1000);
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
} }
}, [isLoading, didError]); }, [isLoading, didError]);
const showPlaceholder = const showPlaceholder =
BLUR_ENABLED &&
props.blurDataURL &&
!wasCached && !wasCached &&
!hideBluePlaceholder; !hideBlurPlaceholder;
return ( return (
<div <div
className={clsx( className={clsx(
className, className,
'flex relative overflow-hidden', 'flex relative',
'bg-gray-100/50 dark:bg-gray-900/50',
)} )}
> >
{showPlaceholder && {showPlaceholder &&
<img {...{ <div className={clsx(
...rest, 'absolute inset-0',
src: blurDataURL, 'bg-main overflow-hidden',
className: clsx( 'transition-opacity duration-300 ease-in',
imageClassName, isLoading ? 'opacity-100' : 'opacity-0',
'absolute', )}>
// Fix poorly blurred placeholder data generated by Safari {(BLUR_ENABLED && props.blurDataURL)
'blur-md scale-110', ? <img {...{
'transition-opacity duration-300 ease-in', ...rest,
isLoading ? 'opacity-100' : 'opacity-0', src: blurDataURL,
), className: clsx(
}} />} imageClassName,
// Fix poorly blurred placeholder data generated by Safari
'blur-md scale-110',
),
}} />
: <div className={clsx(
'w-full h-full',
'bg-gray-100/50 dark:bg-gray-900/50',
)}/>}
</div>}
<Image {...{ <Image {...{
...rest, ...rest,
ref: imgRef, ref: imgRef,