1 files changed, 25 insertions, 10 deletions

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 3c93d27f..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'
@@ -17,12 +17,17 @@ function MyApp({ Component, pageProps }) {
   const [animateLoader, setAnimateLoader] = useState(false)
 
   useEffect(() => {
-    Router.events.on('routeChangeStart', () => setAnimateLoader(true))
-    Router.events.on('routeChangeComplete', () => setAnimateLoader(false))
+    const handleRouteChangeStart = () => setAnimateLoader(true)
+    const handleRouteChangeComplete = () => setAnimateLoader(false)
+
+    Router.events.on('routeChangeStart', handleRouteChangeStart)
+    Router.events.on('routeChangeComplete', handleRouteChangeComplete)
+    Router.events.on('routeChangeError', handleRouteChangeComplete)
 
     return () => {
-      Router.events.off('routeChangeStart', () => setAnimateLoader(true))
-      Router.events.off('routeChangeComplete', () => setAnimateLoader(false))
+      Router.events.off('routeChangeStart', handleRouteChangeStart)
+      Router.events.off('routeChangeComplete', handleRouteChangeComplete)
+      Router.events.off('routeChangeError', handleRouteChangeComplete)
     }
   }, [])
 
@@ -43,11 +48,21 @@ function MyApp({ Component, pageProps }) {
 
   return (
     <>
-      {animateLoader && (
-        <div className='w-screen h-screen z-[500] flex justify-center items-center backdrop-blur'>
-          <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}