Implement a half decent top loading bar

Before we were using a full screen opacity change and that's proving disruptive to the user experience. I think it's better to simply show the loader on the top after ~500 milliseconds of waiting for navigation to go idle
dvnrsn · Dec 6, 2023 · 5c4aa14 · 5c4aa14
1 parent e642d2a
commit 5c4aa14
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 17 deletions.
diff --git a/app/components/global-loading-bar.tsx b/app/components/global-loading-bar.tsx
@@ -0,0 +1,28 @@
+import { useNavigation } from "@remix-run/react";
+import { useEffect, useRef } from "react";
+import LoadingBar, { LoadingBarRef } from "react-top-loading-bar";
+
+export function GlobalLoadingBar() {
+  const navigation = useNavigation();
+
+  const loadingBarRef = useRef<LoadingBarRef>(null);
+  const loaderStarted = useRef(false);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+    if (navigation.state !== "idle") {
+      timeout = setTimeout(() => {
+        if (!loadingBarRef.current) return;
+        loaderStarted.current = true;
+        loadingBarRef.current.continuousStart();
+      }, 400);
+    } else if (loaderStarted.current == true) {
+      loaderStarted.current = false;
+      loadingBarRef.current?.complete();
+    }
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [navigation.state]);
+  return <LoadingBar ref={loadingBarRef} />;
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -9,12 +9,12 @@ import {
   Scripts,
   ScrollRestoration,
   useLoaderData,
-  useNavigation,
 } from "@remix-run/react";
 import { HoneypotProvider } from "remix-utils/honeypot/react";
 
 import stylesheet from "~/tailwind.css";
 
+import { GlobalLoadingBar } from "./components/global-loading-bar";
 import { honeypot } from "./honeypot.server";
 import { authenticator } from "./session.server";
 
@@ -32,7 +32,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
 export default function App() {
   const { honeypotInputProps } = useLoaderData<typeof loader>();
-  const navigation = useNavigation();
+
   return (
     <html lang="en" className="h-full">
       <head>
@@ -42,15 +42,10 @@ export default function App() {
         <Links />
       </head>
       <body className="h-full">
-        <div
-          className={`h-full ${
-            navigation.state === "loading" ? "loading" : ""
-          }`}
-        >
-          <HoneypotProvider {...honeypotInputProps}>
-            <Outlet />
-          </HoneypotProvider>
-        </div>
+        <GlobalLoadingBar />
+        <HoneypotProvider {...honeypotInputProps}>
+          <Outlet />
+        </HoneypotProvider>
         <ScrollRestoration />
         <Scripts />
         <LiveReload />

diff --git a/app/tailwind.css b/app/tailwind.css
@@ -99,9 +99,3 @@ input[type="search"]::-webkit-search-results-decoration {
   transform-origin: bottom left;
   animation-delay: 0.5s;
 }
-
-.loading {
-  opacity: 0.25;
-  transition: opacity 200ms;
-  transition-delay: 200ms;
-}
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
+    "react-top-loading-bar": "^2.3.1",
     "remix-auth": "^3.6.0",
     "remix-auth-form": "^1.4.0",
     "remix-auth-socials": "^2.0.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml