const MediaCardImage = ({ src, title }: { src: string; title: string }) => {
const [loaded, setLoaded] = useState(false);
const handleLoad = () => {
setLoaded(true);
};
return loaded ? (
<Image
onLoad={handleLoad}
src={src}
alt={title}
title={title}
width={200}
height={0}
className='pointer-events-none h-full w-full select-none object-cover object-center'
/>
) : (
<Skeleton className='h-full w-full' />
);
};
#Why if an image is loaded Skeleton does not disappear?
tall lake
chrome hedgeBOT
Hi @tall lake. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the provided code, it seems like the Skeleton component should disappear once the image is loaded because the loaded state is set to true in the handleLoad function, which is called when the onLoad event of the Image component is triggered.
However, the onLoad event might not be working as expected. According to the Next.js documentation (https://nextjs.org/docs/app/api-reference/components/image#onload), the onLoad prop is a function that gets called when the image finishes loading. But, there's no guarantee that it will be called, especially if the image is cached by the browser.
One possible solution could be to use the onLoadingComplete prop instead of onLoad. The onLoadingComplete prop is a function that gets called when the image finishes loading, regardless of whether it was loaded from cache or not. However, please note that this prop is deprecated and might be removed in future versions of Next.js.
Here's how you can modify your code:
const MediaCardImage = ({ src, title }: { src: string; title: string }) => {
const [loaded, setLoaded] = useState(false);
const handleLoad = () => {
setLoaded(true);
};
return (
<Image
onLoadingComplete={handleLoad}
src={src}
alt={title}
title={title}
width={200}
height={0}
className='pointer-events-none h-full w-full select-none object-cover object-center'
/>
{!loaded && <Skeleton className='h-full w-full' />}
);
};
In this modified code, the Skeleton component is rendered only when loaded is false. Once the image finishes loading and handleLoad is called, loaded becomes true and the Skeleton component is no longer rendered.