diff options
| -rw-r--r-- | src/pages/_app.jsx | 24 |
1 files changed, 18 insertions, 6 deletions
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index beacb122..2d74d8b7 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,7 +1,7 @@ import '../styles/globals.css' import NextProgress from 'next-progress' import { useRouter, Router } from 'next/router' -import { AnimatePresence } from 'framer-motion' +import { AnimatePresence, motion } from 'framer-motion' import { Toaster } from 'react-hot-toast' import { QueryClient, QueryClientProvider } from 'react-query' import useDevice from '@/core/hooks/useDevice' @@ -22,10 +22,12 @@ function MyApp({ Component, pageProps }) { Router.events.on('routeChangeStart', handleRouteChangeStart) Router.events.on('routeChangeComplete', handleRouteChangeComplete) + Router.events.on('routeChangeError', handleRouteChangeComplete) return () => { Router.events.off('routeChangeStart', handleRouteChangeStart) Router.events.off('routeChangeComplete', handleRouteChangeComplete) + Router.events.off('routeChangeError', handleRouteChangeComplete) } }, []) @@ -46,11 +48,21 @@ function MyApp({ Component, pageProps }) { return ( <> - {animateLoader && ( - <div className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'> - <LogoSpinner /> - </div> - )} + <AnimatePresence> + {animateLoader && ( + <motion.div + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + transition={{ + duration: 0.1 + }} + className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center' + > + <LogoSpinner /> + </motion.div> + )} + </AnimatePresence> <Toaster position='top-center' containerStyle={toasterStyle} |