import "../styles/globals.css" ; import "../styles/prism.css" ; import type { AppProps } from "next/app" ; import { useRouter } from "next/router" ; import { useEffect , useState } from "react" ; import { motion } from "framer-motion" ; import Loading from "../components/Layout/Loading" ; const App = ( { Component , pageProps } ) => { const router = useRouter ( ) ; const [ state , setState ] = useState ( { isRouteChanging : false , loadingKey : 0 , } ) ; useEffect ( ( ) => { const handleRouteChangeStart = ( ) => { setState ( ( prevState ) => ( { ... prevState , isRouteChanging : true , loadingKey : prevState . loadingKey ^ 1 , } ) ) ; } ; const handleRouteChangeEnd = ( ) => { setState ( ( prevState ) => ( { ... prevState , isRouteChanging : false , } ) ) ; } ; router . events . on ( "routeChangeStart" , handleRouteChangeStart ) ; router . events . on ( "routeChangeComplete" , handleRouteChangeEnd ) ; router . events . on ( "routeChangeError" , handleRouteChangeEnd ) ; return ( ) => { router . events . off ( "routeChangeStart" , handleRouteChangeStart ) ; router . events . off ( "routeChangeComplete" , handleRouteChangeEnd ) ; router . events . off ( "routeChangeError" , handleRouteChangeEnd ) ; } ; } , [ router . events ] ) ; return ( < > < Loading isRouteChanging = { state . isRouteChanging } key = { state . loadingKey } / > < > < motion . div id = "content" key = { router . route } initial = "initial" animate = "enter" exit = "exit" variants = { { initial : { opacity : 0 , y : - 10 } , enter : { opacity : 1 , y : 0 } , exit : { opacity : 0 , y : 10 } , } } > < Component { ... pageProps } / > < /motion.div> < /> < />); } ; export default App ;