How to add loader in Nextjs

The problem is when the user clicks on any route to go to another page, the fetching request needs to be finished first to be shown to the user.

And the user generally doesn’t have any clue what’s going on because there is no visual clue on the screen.

To solve this problem, we can introduce a loader to indicate when its loading to the user.

1. Install loaders from react-spinners.
2. Import the specific spinner in your component.
3. Specify the color , size and speed of loader inside the component.

This is a code snippet related to the same.

import React, { useState, useEffect } from "react";
import Fadeloader from "react-spinners/FadeLoader";


function Loading() {
  const [loading, setLoading] = useState(false);


  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 5000);
  }, []);


  return (
    <div className="LoaderContainer"> {/* Wrap the loader with a container */}
     <div className="Loader">
        {loading ? (
          <>
            <Fadeloader color={'#c036d6'} loading={loading} size={500} margin={5} />
            <p className="pload">Loading...</p>
          </>
        ) : null}
      </div>
    </div>
  );
}


export default Loading;