How do I have a default image as a loading screen for nextjs

See more:

Javascript

next.js

I want to have my background as the loading screen between the page transitions in next js.

But I'm not able to get any console logs from my routeChangeStart and routeChangeComplete events when I try to switch to another page.

What I have tried:

Currently I have a Loader.js file that stores my image:-

import styles from './layout.module.css'

export default function Loader(){
    return(
        <div className={styles.loaderContainer}>
            <img src="../uploads/bg1080x1920.jpg" />
            <div>Loading ...</div> 
        </div>
    )

And in my _app.js I am using next/router for handling the routeChangeStart and routeChangeComplete events:

import {useState, useEffect} from "react";
import { useRouter } from "next/router";
import Loader from "../components/Loader"

export default function App({ Component, pageProps }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)

  useEffect(() => { //<-- this useEffect will be triggered just one time at component initialization
      router.events.on("routeChangeStart", (url) => {
         console.log("Route is changing");
         setLoading(true)
      });
      router.events.on("routeChangeComplete", (url) => {
         console.log("Route is changed");
         setLoading(false)
      });
  }, []);
  
  return (
    <>
    {loading && <Loader />}
    <Component {...pageProps} />;
    </>
  );
}