0
177
ViewsPage loader on nextjs
How can I create a loader page between transitions on same web application using Next JS?
Right now, in dev environment the pages have a normal transition, meaning that the CSS is applied on every page correctly. The problem begins when building the application to production environment, for example, when I click on a button that has a Link component to another page, it appears like the following for 1 or 2 seconds:
After 1 or 2 seconds it renders accordingly:
Sorry for the vague question, but I don't know where to start looking to resolve this problem and I guess it'll fix with two possible solutions:
- A loader page between transitions on pages.
- Doing something on _app.js or _document.js, but right now I don't know how to start looking here.
2 answers
Answer question0
You need to import Link from next js to solve the render issue, if you want to do a loading screen you can use hooks, for example:
import {useState, useEffect} from 'react';
import Router from 'next/router';
function MyApp() {
const [loading, setLoading] = useState(false);
useEffect(() => {
Router.events.on('routeChangeStart', () => setLoading(true));
Router.events.on('routeChangeComplete', () => setLoading(false));
Router.events.on('routeChangeError', () => setLoading(false));
return () => {
Router.events.off('routeChangeStart', () => setLoading(true));
Router.events.off('routeChangeComplete', () => setLoading(false));
Router.events.off('routeChangeError', () => setLoading(false));
};
}, [Router.events]);
return (
<>
{
(loading)
?
<p>Loading...</p>
:
<p>Home</p>
}
</>
);
}
0
In approaching this problem, there are two ways to think about it.
- Individual page entries/exits (fade out/fade in) can have animation applied, this really means those components can apply a CSS based transition as the routes are mounted and the transition is applied to the parent (page level container)
- Individual elements can be animated as they are unmounted.
For both #1 and #2 if you want to roll your own, you can look at https://reactcommunity.org/react-transition-group/switch-transition
These two approaches build on top of the above ideas
- If youu are OK with adding Framer - https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion
- With next page transition - which focuses more on the react transition group https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions