We have a GIF that is 11mb in the homepage, a bit large, but it is a business requirement. I wish to start downloading the GIF in background, while the "Loading" page is playing out, so that when the home is shown after 2 seconds, the GIF is already downloaded (or almost).
How should I approach this in Next.js? Is that a hack parameter that can solve this using the Image component?
I think the problem is that, since Image for the GIF is only declared in the Home page, it won't start loading until the component is rendered by Next. How can I overcome this?
Image GIF declaration inside the Home
<Image
src={"/assets/home.gif"}
alt=""
layout="fill"
loading="eager"
priority
placeholder="blur"
blurDataURL="/assets/home_blur.png"
/>
Main page that showd the Loading page before the Home
function MainPage(show) {
return show ? (
return (
<Home />
)) : (
<Loading />
);
}
Maybe not a best practice solution but I was able to trigger it using visibility: hidden;
const divClass = state.firstTime ? styles.hidden : styles.visible;
// Declare the image in the loading screen
return (
<div className={divClass}>
<SlidesDiv>
<Image
src="/assets/home.gif"
height={1000}
width={1000}
alt=""
priority="true"
/>
</SlidesDiv>
</div>
)
// In my styles file
.hidden {
position: absolute;
visibility: hidden;
}
.visible {
position: absolute;
visibility: visible;
}