page loader

1 files changed, 27 insertions, 2 deletions

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 634e631f..6906cb92 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,11 +1,13 @@
 import '../styles/globals.css'
 import NextProgress from 'next-progress'
-import { useRouter } from 'next/router'
+import { useRouter, Router } from 'next/router'
 import { AnimatePresence } from 'framer-motion'
 import { Toaster } from 'react-hot-toast'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import useDevice from '@/core/hooks/useDevice'
 import { useEffect, useState } from 'react'
+import Image from 'next/image'
+import IndoteknikLogo from '@/images/LOGO-INDOTEKNIK-GEAR.png'
 
 const queryClient = new QueryClient()
 
@@ -13,6 +15,18 @@ function MyApp({ Component, pageProps }) {
   const router = useRouter()
   const { isMobile } = useDevice()
 
+  const [animateLoader, setAnimateLoader] = useState(false)
+
+  useEffect(() => {
+    Router.events.on('routeChangeStart', () => setAnimateLoader(true))
+    Router.events.on('routeChangeComplete', () => setAnimateLoader(false))
+
+    return () => {
+      Router.events.off('routeChangeStart', () => setAnimateLoader(true))
+      Router.events.off('routeChangeComplete', () => setAnimateLoader(false))
+    }
+  }, [])
+
   const [toasterStyle, setToasterStyle] = useState({})
 
   useEffect(() => {
@@ -30,6 +44,17 @@ function MyApp({ Component, pageProps }) {
 
   return (
     <>
+      {animateLoader && (
+        <div className='w-screen h-screen z-[500] flex justify-center items-center backdrop-blur'>
+          <Image
+            src={IndoteknikLogo}
+            alt='Indoteknik Logo'
+            width={64}
+            height={64}
+            className='page-loader'
+          />
+        </div>
+      )}
       <Toaster
         position='top-center'
         containerStyle={toasterStyle}
@@ -45,7 +70,7 @@ function MyApp({ Component, pageProps }) {
           initial={false}
           onExitComplete={() => window.scrollTo(0, 0)}
         >
-          <Component {...pageProps} key={router.asPath} />
+          {!animateLoader && <Component {...pageProps} key={router.asPath} />}
         </AnimatePresence>
       </QueryClientProvider>
     </>