DEV Community

How to create a Preloader in Next.js

Caleb! on October 24, 2021

Before you read this article, I want you to know that it is a bit flawed, and I apologize for the mistakes I made previously, while authoring this ...

Read full post

Martin Vandersteen • Oct 26 '21

I feel like it doesn't really work, does it ? You're only waiting 5 arbitrary seconds and since the content of the page is not in the DOM it doesn't even fetch the images etc I believe ?

The way I did it was by using a loader that goes on top of the content instead of replacing it and listening to events from imagesloaded.desandro.com/ to know when the loader could be removed

Caleb! • Oct 26 '21

Yeah Martin...

That was kinda like the idea around it... Some DOM contents (mostly images) takes time before they're displayed on a webpage.

The idea behind the usage of the setTimeout function is to show the leader for small amount of time instead of having a blank section that holds the image or content you're expecting to see on a webpage.

I think, adding the preloading screen for a short amount of time helps to keep the users engaged on your website, before the contents of the page are fully ready.

One can also go ahead to increase or reduce the milliseconds. It all depends on your preferences, and the demography of the type of users your building for.

Martin Vandersteen • Oct 26 '21 • Edited

Yes I understood that, but the way you do it won't work I think, since NextJS won't load images that are not in the DOM, so you're making your users wait for nothing I believe ? The content to load should be in the DOM but you can show a loader OVER it while you're loading.

Example :

<>
  <LoadingScreen /> // To remove/hide once it's fully loaded
  <> // Shown all the time
     <Component {...pageProps} />
  </>
</>

Caleb! • Oct 26 '21

No Martin,

Nextjs already has it's own image optimization feature when they introduced the <Image /> component.

You can decide to pass properties like onBlurdataURL to display either a loader or masked image before the realy content is shown.

But the aim of this article isn't related to that. Take for example, in some countries where the access to internet service is very poor. The time that it'll take toblaod some DOM elements will be high. A preloading component comes in handy in situations like this.

Martin Vandersteen • Oct 26 '21

Yes, I know about the Image component but that doesn't have much to do with what I'm saying.

I don't think you understand what I'm trying to say but that's ok, my comments will be there to help people having trouble with it !

Caleb! • Oct 26 '21

What will your own approach be like.

Can you share it with me? If you don't mind.

Comment deleted

Caleb! • Mar 1 '22

Yes, Ivan. I'm setting the loader to be visible on every page render. That's why it is inside the _app.js file.

And, yes... there's no logic that set's the loader back to false since we're making use of it in the useEffect hook, which runs only once, i.e. when the page is loaded for the first time or when it is refreshed.

arshkkk • Oct 26 '21

Hardcoding the loading time isn't the best way, it's false loading
Because In nextjs production things are very fast, user will be waiting unnecessarily for each page change

Instead you can use router events in nextjs

nextjs.org/docs/api-reference/next...

Caleb! • Oct 26 '21 • Edited

Hi @arshkkk ,

I'm not making the preloading screen show on each page change. Just when the page is first mounted to the DOM.

But, I'll definitely check the link you shared here. Thank you for sharing it 😎

Kyle Johnson • Apr 27 '22

Here's how I did this, rather than being an arbitrary load it actually does detect images being loaded.

import Router, { useRouter } from 'next/router'
import { useEffect, useRef, useState } from 'react'
// @ts-ignore
import AnimatedNumber from 'animated-number-react'
import NProgress from 'nprogress'
let _number = 0

const startingPoint = 20 // Loading progress on route change started
const domLoadedPoint = 35 // Loading progress when page is routed and waiting for images
const totalWait = 200 // How long to wait before going from 99% to 100%
const totalDuration = 200 // How long going from 0% - 100% takes
NProgress.configure({ easing: 'ease', speed: 200 }) // The easing of the progress bar

if (typeof document !== 'undefined') {
  NProgress.set(startingPoint / 100)
}

export default function () {
  const router = useRouter()
  const ref = useRef(router.asPath)
  const [number, setNumber] = useState<number>(35)
  const [duration, setDuration] = useState<number>(totalDuration)
  const updateNumber = (_num: number) => {
    const num = _num === 100 ? 99 : _num
    if (_num === 100) {
      setTimeout(() => {
        document
          .getElementsByTagName('html')[0]
          .classList.remove('nprogress-busy')
        setDuration(50)
        setNumber(100)
        NProgress.set(1)
        _number = 100
      }, totalWait)
    }
    setDuration(parseInt(`${((num - _number) / 100) * totalDuration}`))
    setNumber(num)
    NProgress.set(num / 100)
    _number = num
  }

  useEffect(() => {
    if (typeof document !== 'undefined') {
      const NProgress = require('nprogress')
      let timer: any

      // @ts-ignore
      // eslint-disable-next-line no-inner-declarations
      function load(route) {
        if (ref.current !== route) {
          updateNumber(startingPoint)
        }
      }

      // @ts-ignore
      // eslint-disable-next-line no-inner-declarations
      function stop(route) {
        if (!!route && route === ref.current) {
          return
        }
        if (route) {
          ref.current = route
        }
        const incompleteImages = Array.from(document.images).filter(
          (img) => !img.complete,
        )
        Promise.all(
          incompleteImages.map((img) =>
            new Promise((resolve) => {
              img.onload = img.onerror = resolve
            }).then(() => {
              updateNumber(_number + pointsPerImage)
            }),
          ),
        ).then(() => {
          updateNumber(100)
        })

        updateNumber(domLoadedPoint)

        console.log(_number)
        const pointsPerImage = (100 - domLoadedPoint) / incompleteImages.length
      }

      Router.events.on('routeChangeStart', load)
      Router.events.on('routeChangeComplete', stop)
      Router.events.on('routeChangeError', stop)
    }
    stop()
  }, [])

  return (
    <AnimatedNumber
      className='nprogress-text default'
      value={number}
      formatValue={(v: number) => `${parseInt(`${v}`)}%`}
      duration={duration}
    />
  )
}

Ilir Bajrami • Feb 9 '23 • Edited

Even this new solution not working. Your useEffect function should listen to router event changes and should look like this:

 const router = useRouter();
   const [loading, setLoading] = useState(false);

 useEffect(() => {
 router.events.on("routeChangeStart", () => {
  setLoading(true);
 });

router.events.on("routeChangeComplete", () => {
  setLoading(false);
});

router.events.on("routeChangeError", () => {
  setLoading(false);
});
}, [router]);

Caleb! • Feb 10 '23

Thanks Ilir! Been learning about the super power of the useRouter hook lately. I'll have this modified to reflect the change as soon as possible.

Manas Mishra • May 24 '22

It's not actually a preloader. Preloader should have to wait till API will load, and some API's will take less time, some will take more, and using setTimeOut is actually making it static, but we need dynamic timing, which is not possible with your code.

Abdulrahman Elheyb • Oct 5 '22

I have problem in meta tags is not rendered when page is loading. Meta Tags will be should load in the request

Caleb! • Oct 6 '22

Hi @abdulrahmanelheyb,

Kindly take a look at this article that explains a possible fix.