add page loading indicator

khanghy2130 · Oct 17, 2024 · 92d2113 · 92d2113
1 parent 4e35b59
commit 92d2113
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/app/components/PageLoadingIndicator.tsx b/app/components/PageLoadingIndicator.tsx
@@ -0,0 +1,14 @@
+import { useNavigation } from "@remix-run/react";
+import SpinnerSVG from "./SpinnerSVG";
+
+export default function PageLoadingIndicator() {
+    const navigation = useNavigation();
+    if (navigation.state !== "loading") return null;
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <div className="h-20 w-20 text-primaryColor">
+                <SpinnerSVG />
+            </div>
+        </div>
+    );
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -10,9 +10,10 @@ import {
     Scripts,
     useLoaderData,
     useLocation,
+    useNavigation,
     useRevalidator,
 } from "@remix-run/react";
-import { useState, useEffect, useMemo, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { createBrowserClient } from "@supabase/ssr";
 
 import stylesheet from "~/tailwind.css";
@@ -30,6 +31,7 @@ import { RawCartItem } from "./utils/types/ContextProps.type";
 import PopupNotificationsList from "./components/PopupNotificationsList";
 import Footer from "./components/Footer";
 import { useNotification } from "./components/useNotification";
+import PageLoadingIndicator from "./components/PageLoadingIndicator";
 
 export const links: LinksFunction = () => [
     { rel: "stylesheet", href: stylesheet },
@@ -200,6 +202,7 @@ function App() {
                 <Links />
             </head>
             <body key={forceRerenderCounter}>
+                <PageLoadingIndicator />
                 <Navbar
                     cartCount={cartCount}
                     setSidePanelIsShown={setSidePanelIsShown}