Add loader

1 files changed, 21 insertions, 1 deletions

diff --git a/src/pages/_app.js b/src/pages/_app.js
index 136b8cb3..1d8c5ce0 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -2,8 +2,23 @@ import '../styles/globals.css';
 import NextProgress from "next-progress";
 import { ToastContainer, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
 
 function MyApp({ Component, pageProps }) {
+  const router = useRouter();
+  const [pageLoading, setPageLoading] = useState(false);
+
+  useEffect(() => {
+    const handleStartLoading = () => { setPageLoading(true) };
+    const handleCompleteLoading = () => { setPageLoading(false) };
+
+    router.events.on('routeChangeStart', handleStartLoading);
+    router.events.on('routeChangeComplete', handleCompleteLoading);
+    router.events.on('routeChangeError', handleCompleteLoading);
+  }, [router]);
+
   return (
     <>
       <ToastContainer 
@@ -17,7 +32,12 @@ function MyApp({ Component, pageProps }) {
       <NextProgress color="#D7A30A" options={{
         showSpinner: false,
       }} />
-      <Component {...pageProps} />
+      {pageLoading ? (
+        <div className='h-screen w-screen flex flex-col justify-center items-center'>
+          <Image src='/images/loading.gif' width={64} height={64} alt='Loading Indoteknik' />
+          <h1>Loading</h1>
+        </div>
+      ) : <Component {...pageProps} />}
     </>
   )
 }