This content originally appeared on DEV Community and was authored by James Perkins
I am a huge advocate of minimalist websites, I don't hate heavily overly designed websites with animations and designs but they have a place. Talking of animations, one thing you do want is a way to handle moving between pages and loading data.
Handling loading through next/router
One great feature of next/router is the ability to tap into the events that happen during a route change. This means you can use these to handle loading. So what are the events we need? We need route change events
routeChangeStart
routeChangeComplete
routeChangeError
With these three events and useEffect and useState you can handle each route change on your application. For example
function Loading() {
const router = useRouter();
const [loading, setLoading] = useState(false);
useEffect(() => {
const handleStart = (url) => (url !== router.asPath) && setLoading(true);
const handleComplete = (url) => (url === router.asPath) && setTimeout(() =>{setLoading(false)},2000);
router.events.on('routeChangeStart', handleStart)
router.events.on('routeChangeComplete', handleComplete)
router.events.on('routeChangeError', handleComplete)
return () => {
router.events.off('routeChangeStart', handleStart)
router.events.off('routeChangeComplete', handleComplete)
router.events.off('routeChangeError', handleComplete)
}
})
return loading && (
<div>loading</>
)
}
What is happening?
Now you have an example to look at, let us talk about what we are doing to make a loading function. First we are setting a state of loading as a boolean. This allows you to easily swap between it is and is not loading, we are then using useEffect to power the checks. The useEffect here has two functions one to handle the starting and one to handle when it is finished, we then use the router.events mentioned above to decide what function should run. If we are starting, it should run handleStart which sets loading to true. Otherwise it's finished and we should set loading to false.
Finally we have a conditonal renderer that only shows if it is indeed loading.
This content originally appeared on DEV Community and was authored by James Perkins
James Perkins | Sciencx (2022-03-23T22:49:53+00:00) Page to page loading in next.js. Retrieved from https://www.scien.cx/2022/03/23/page-to-page-loading-in-next-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.