feat: added route loading spinner

components/layout/navbar/Navbar.jsx

@@ -43,7 +43,10 @@ const Navbar = () => {
   }
 
   return (
-    <AppBar position="static">
+    <AppBar
+      position="static"
+      sx={{ zIndex: 100, position: 'fixed', top: 0, left: 0 }}
+    >
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />

pages/_app.js

@@ -11,6 +11,38 @@ import { useState } from 'react';
 import Layout from '../components/layout/base-layout/Layout';
 import '../styles/globals.css';
 
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const LoadingSpinner = () => {
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const handleStart = (url) => url !== router.asPath && setLoading(true);
+    const handleComplete = (url) => url === router.asPath && setLoading(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);
+    };
+  });
+
+  return (
+    loading && (
+      <div className="spinner-wrapper">
+        <div className="spinner"></div>
+      </div>
+    )
+  );
+};
+
 function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   const [queryClient] = useState(() => new QueryClient());
 
@@ -27,6 +59,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
                 content="width=device-width, initial-scale=1"
               />
             </Head>
+            <LoadingSpinner />
             <Component {...pageProps} />
           </Layout>
         </SessionProvider>

pages/api/hello.js

@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
-export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
-}

requests/dataIdsRequest.js

@@ -1,7 +1,7 @@
 import apiEndpoints from './apiEndpoints';
 
 export const getDataIds = async () => {
-  const response = await fetch(`${apiEndpoints.dataIds}`);
+  const response = await fetch(`http://localhost:3000${apiEndpoints.dataIds}`);
 
   const data = await response.json();
 

styles/globals.css

@@ -17,3 +17,66 @@ h5,
 h6 {
   font-family: 'Lato', sans-serif;
 }
+
+.spinner-wrapper {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgb(255, 255, 255);
+  z-index: 99;
+}
+.spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  height: 60px;
+  width: 60px;
+  margin: 0px auto;
+  -webkit-animation: rotation 0.6s infinite linear;
+  -moz-animation: rotation 0.6s infinite linear;
+  -o-animation: rotation 0.6s infinite linear;
+  animation: rotation 0.6s infinite linear;
+  border-left: 6px solid rgba(0, 174, 239, 0.15);
+  border-right: 6px solid rgba(0, 174, 239, 0.15);
+  border-bottom: 6px solid rgba(0, 174, 239, 0.15);
+  border-top: 6px solid rgba(0, 174, 239, 0.8);
+  border-radius: 100%;
+}
+
+@-webkit-keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+  }
+}
+@-moz-keyframes rotation {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-o-keyframes rotation {
+  from {
+    -o-transform: rotate(0deg);
+  }
+  to {
+    -o-transform: rotate(359deg);
+  }
+}
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}