Next/Image placeholder skeleton background

[swcarter007]

Describe the feature you'd like to request

When loading an image element, I'd like to avoid having to make a url request and the image processing to blur the image and instead use a CSS background on the image. Libraries such as react-loading-skeleton allow you to quickly replace the component with an image, but that complicates your application code with the usage. It would be nice to have an out-of-the-box solution that you can specify the CSS properties for the non-loaded state and then have them overridden on the loaded state.

Describe the solution you'd like

Describe alternatives you've considered
Wrapping the image element in another custom hook that applies this logic but makes it harder to update in the future when new features of the image element come out.

[thibautsabot]

Hello!

You could leverage the image events such as onload.

For exemple I'm doing something like:

const [isLoaded, setIsLoaded] = useState(false)

{!isLoaded && <LoadingState />}
<NextImage
   onLoad={() => setIsLoaded(true)}
   {...props}
/>

[swcarter007]

The problem with that is that you then need to add that tracking logic for every image you have loading. I believe the context for a loading state should be built into the image component by default so that there is no external code needed to change the context of the image itself. It would be more performant locally on the client by avoiding having an unnecessary download of a blurry image, it removes the need to have the server process the image twice (one blurry one not), and it would avoid having to have similarly matched sizes of the LoadingState to avoid layout shifts as that size is already built into the image size.

[predaytor]

Create an abstraction:

export const Image = ({ css, ...props }: { css?: any } & Omit<ImageProps, 'onLoadingComplete'>) => {
    const [isLoaded, setIsLoaded] = useState(false);
    const [isSkeleton, setIsSkeleton] = useState(skeleton);

    return (
        <div
            style={{
                position: 'relative',
                inlineSize: '100%',

                overflow: 'hidden',

               '@keyframes shimmer': {
                    from: {
		         transform: 'translateX(-100%)',
	            },
	            to: {
		        transform: 'translateX(100%)',
	            },
                },

                '&.skeleton': {
                    background: 'var(--gray-4)',

                    '&::before': {
                        content: '',
                        position: 'absolute',
                        inset: 0,
                        backgroundImage: `linear-gradient(
				90deg,
			        rgba(255, 255, 255, 0) 0,
	                        rgba(255, 255, 255, 0.2) 20%,
                                rgba(255, 255, 255, 0.5) 60%,
	                        rgba(255, 255, 255, 0)
			)`,
                        animation: 'shimmer 2s infinite',
                    },
                },
            }}
            className={clsx({ skeleton: isSkeleton })}
        >
            <div
                style={{
                    '&.fade': {
                        transition: 'opacity 200ms ease',
                        opacity: 0,

                        '&[data-loaded="true"]': {
                            opacity: 1,
                        },
                    },

                    ...css,
                }}
                className={clsx({ fade: transition })}
                data-loaded={isLoaded}
                /* remove skeleton after transition ends */
                onTransitionEnd={event => event.propertyName === 'opacity' && setIsSkeleton(false)}
            >
                <NextImage
                    quality={90}
                    layout="intrinsic"
                    {...props}
                    onLoadingComplete={() => setIsLoaded(true)}
                />
            </div>
        </div>
    );
};

[michalhonc]

If your loaded state relies only on CSS matching you can omit use of useState and set data attribute within the onLoad event handler

Example with use of Tailwind:

<Image
   // other props
   data-loaded='false'
   onLoad={event => {
      event.currentTarget.setAttribute('data-loaded', 'true')
   }}
   className='data-[loaded=false]:animate-pulse data-[loaded=false]:bg-gray-100/10'
/>

[turkgenciyim]

this is insane! thanks you so much

[theDanielJLewis]

This doesn't work well because of #64458.

[theDanielJLewis]

The problem with anything that uses onLoad is that Next.js still doesn't trigger it when the image has finished loading; there's a noticeable delay. I reported and demonstrated it in #64458.