I am currently in the process of implementing a standard loading strategy for NextJS applications using framer-motion.
function MyApp({ Component, pageProps, router }) {
const [isFirstMount, setIsFirstMount] = useState(true);
useEffect(() => {
const handleRouteChange = () => {
setIsFirstMount(false);
};
router.events.on("routeChangeStart", handleRouteChange);
// If the component is unmounted, unsubscribe
// from the event with the `off` method:
return () => {
router.events.off("routeChangeStart", handleRouteChange);
};
}, [router]);
console.log("My App ran");
return (
<Layout>
<AnimatePresence exitBeforeEnter>
<motion.div exit={{ opacity: 0 }}>
{isFirstMount && <InitialTransition />}
<motion.div
initial="initial"
animate="animate"
variants={content(isFirstMount)}
className="space-y-12"
>
<Component
isFirstMount={isFirstMount}
key={router.route}
{...pageProps}
/>
</motion.div>
</motion.div>
</AnimatePresence>
</Layout>
);
}
I encountered an issue related to parameters. When utilizing parameters during the initial load (such as refreshing the browser), NextJS triggers an additional render. This behavior seems to be caused by NextJS updating the router query object. For instance,
WEBSITE.com/ // works - you will see the black loading screen, the black loading screens slides down, and the child objects start popping on
// vs
WEBSITE.com/?test=test // fails - you will see the black loading screen flash in and out of view before the rest of the app proceeds
I have created a codesandbox example. On the client side, test by adding or removing ?test=test at the end of the URL.
Is there a way to prevent the extra re-render or ensure that the loader functions consistently regardless of the presence of parameters?
Update
I tested @Mokhtar's code. Surprisingly, it did not make any changes but the transitions started working smoothly. After some investigation, I discovered that eliminating all the logic related to isFirstMount and useEffect resulted in correct transitioning.
function MyApp({ Component, pageProps, router }) {
console.log("My App ran");
return (
<Layout>
<AnimatePresence exitBeforeEnter>
<motion.div exit={{ opacity: 0 }}>
<InitialTransition />
<motion.div
initial="initial"
animate="animate"
variants={content(true)}
>
<Component key={router.route} {...pageProps} />
</motion.div>
</motion.div>
</AnimatePresence>
</Layout>
);
}
Can anyone explain why this approach is successful? Initially, I believed that the exit opacity/sliding action would only occur when the Component was removed.