add loader animation

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}