I've been working on creating a loading screen for my Next.js project. The issue I'm facing is that sometimes the loading message stays on the screen and doesn't go away even after the page has loaded. I suspect this may be due to the state not changing or the Router not checking the path properly after loading.
I attempted to pass a dependency array with the router, router.asPath, and router.events but the problem persists. How can I make the loading screen disappear once the page finishes loading?
import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/router';
export default function Loading() {
const router = useRouter()
const [loading, setLoading] = useState(false)
useEffect(() => {
const hanldeChangeStart = (url) => {
url !== router.asPath && setLoading(true)
}
const hanldeChangeComplete = (url) => {
url === router.asPath && setLoading(false)
}
router.events.on('routeChangeStart', hanldeChangeStart)
router.events.on('routeChangeComplete', hanldeChangeComplete)
router.events.on('routeChangeError', hanldeChangeComplete)
return () => {
router.events.off('routeChangeStart', hanldeChangeStart)
router.events.off('routeChangeComplete', hanldeChangeComplete)
router.events.off('routeChangeError', hanldeChangeComplete)
}
})
if(loading){
return (
<div className='vh-100 vw-100 text-center'>
<h1>Loading...</h1>
<p>{loading ? 'loading' : 'notloading'}</p>
</div>
)
}
}
My app.js structure is as follows:
import Loading from '@/components/Loading';
export default function App({ Component, pageProps }) {
return (
<>
<Loading />
<Component {...pageProps} />
</>
)
}