I have a requirement to use my background as the loading screen during page transitions in next js. Currently, I have a Loader.js file that contains the following code snippet:
import styles from './layout.module.css'
export default function Loader(){
return(
<div className={styles.loaderContainer}>
<img src="../uploads/bg1080x1920.jpg" />
<div>Loading ...</div>
</div>
)
In addition, in my _app.js file, I am utilizing next/router to handle the routeChangeStart and routeChangeComplete events:
import {useState} 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)
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} />;
</>
);
}
However, I am facing an issue where I do not receive any console logs when trying to switch to another page using the routeChangeStart and routeChangeComplete events.