Next.js Image Component Causing Image Flickering during Route Transitions
This might be a silly question, but I'm experiencing an issue where images using the Next.js `<Image />` component flicker during route transitions. My project is using Next.js version 13.0.6, and I've set up the images to load from a remote source. The flickering happens on fast navigations between pages, which is frustrating since it disrupts the user experience. I've tried various optimizations, including preloading the images using the `link` tag in the head, but that didn't seem to help. Here's a snippet of my code: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="https://example.com/my-image.jpg" alt="A beautiful scenery" width={800} height={600} priority /> </div> ); }; export default MyComponent; ``` Additionally, I have the `next.config.js` file set up like so: ```javascript module.exports = { images: { domains: ['example.com'], }, }; ``` Despite setting `priority` for the image, the flickering persists when transitioning between pages. I've also noticed that the issue is more prevalent on slower networks, which makes me think it could be a loading strategy problem. Is there a recommended approach to prevent this flickering or any configuration I might be missing? Any advice would be greatly appreciated! Thanks for your help in advance! For reference, this is a production web app. Any ideas how to fix this?