Hello Guys!

On many pages I have seen a splash-screen like approach where there‘s a loading process indicator / bar while the assets are loaded in the background. When finished, the screen disappears and the main page is revealed.

Now, I have two types of pages: the home page and a project page for each project i am fetching via getStaticProps from Contentful.

As I am using some animations depending on the images, i want to strange behavior / animations when the images have not been fully loaded yet. That’s why I would like to include this type of loading screen before the page loads. I would love to have the option to pass the images that must be pre-loaded on page level in order to avoid loading all website assets but only load the ones you‘d need to see a page.

For example, on the home page i would only need to load the project thumbnails while on the project pages I‘d need all the media for the project.

What would be a good approach to implement this? Are there any libraries? Unfortunately I haven‘t found any tutorials or articles about this topic.

Thanks!