Merge pull request #3 from Alucard2169/next-auth-implemen

added loading componennt

components/Layout.jsx

@@ -1,13 +1,39 @@
-import { useState } from "react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import Auth from "./Auth";
+import Loading from "./Loading";
 import Navbar from "./Navbar";
 
 const Layout = ({ children }) => {
-  const [formState,setFormState] = useState(false)
+  const [formState, setFormState] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleStart = () => {
+      setIsLoading(true);
+    };
+
+    const handleComplete = () => {
+      setIsLoading(false);
+    };
+
+    router.events.on("routeChangeStart", handleStart);
+    router.events.on("routeChangeComplete", handleComplete);
+    router.events.on("routeChangeError", handleComplete);
+
+    return () => {
+      router.events.off("routeChangeStart", handleStart);
+      router.events.off("routeChangeComplete", handleComplete);
+      router.events.off("routeChangeError", handleComplete);
+    };
+  }, [router]);
+
   return (
     <div>
+      {isLoading && <Loading />}
       <Navbar data={{ formState, setFormState }} />
-      <Auth data={{formState,setFormState}}/>
+      <Auth data={{ formState, setFormState }} />
       {children}
     </div>
   );

components/Loading.jsx

@@ -0,0 +1,19 @@
+import loadingStyle from '@/styles/loading.module.css';
+import { Dna } from "react-loader-spinner";
+const Loading = () => {
+    return (
+      <div className={loadingStyle.loadingPage}>
+        <Dna
+          visible={true}
+          height="80"
+          width="80"
+          ariaLabel="dna-loading"
+          wrapperStyle={{}}
+                wrapperClass="dna-wrapper"
+                className={loadingStyle.loader}
+        />
+      </div>
+    );
+}
+
+export default Loading;