Next.js Image Component scenarios to Load Placeholder for Slow Network Conditions
I'm maintaining legacy code that Hey everyone, I'm running into an issue that's driving me crazy. I'm working with an scenario with the Next.js Image component where the placeholder image doesn't display as expected on slow network connections. I've set up a custom loader for my images to use a CDN, but when testing on a throttled connection (e.g., 3G via Chrome DevTools), I see the loading spinner indefinitely without showing the placeholder. My custom loader is as follows: ```javascript const myLoader = ({ src, width, quality }) => { return `https://my-cdn.com/${src}?w=${width}&q=${quality || 75}`; }; ``` And I'm using the Image component like this: ```javascript <Image loader={myLoader} src="large-image.jpg" alt="A description of the image" width={800} height={600} placeholder="blur" blurDataURL="/path/to/placeholder.jpg" /> ``` I've ensured that the blurDataURL is correctly set and accessible, yet the placeholder doesn’t appear when the image is slow to load. I've also confirmed that my CDN is optimized for serving images. The console shows no errors, just the ongoing loading state. Has anyone experienced similar issues or have suggestions on making the placeholder work under these conditions? Is there a specific setting or optimization that I might be missing for handling low-bandwidth scenarios effectively? This is part of a larger application I'm building. Am I missing something obvious? My development environment is Ubuntu 20.04. What would be the recommended way to handle this?