add nprogress loader

manasites · Sep 21, 2024 · 9f4c05b · 9f4c05b
1 parent c65978e
commit 9f4c05b
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/app/root.tsx b/app/root.tsx
@@ -15,8 +15,11 @@ import {
    Outlet,
    Scripts,
    useLoaderData,
+   useLocation,
+   useNavigation,
 } from "@remix-run/react";
 import splideCSS from "@splidejs/splide/dist/css/splide-core.min.css";
+import { useNProgress } from "@tanem/react-nprogress";
 import { useTranslation } from "react-i18next";
 import reactCropUrl from "react-image-crop/dist/ReactCrop.css";
 import rdtStylesheet from "remix-development-tools/index.css";
@@ -145,6 +148,7 @@ function App() {
    const { i18n } = useTranslation();
    const isBot = useIsBot();
    const theme = useTheme();
+   const navigation = useNavigation();
 
    useChangeLanguage(locale);
    const { site } = useSiteLoaderData();
@@ -160,6 +164,17 @@ function App() {
    }, [toast]);
 
    const [searchToggle, setSearchToggle] = useState(false);
+   const [isLoading, setIsLoading] = useState(false);
+
+   useEffect(() => {
+      // when the state is idle then we can to complete the progress bar
+      if (navigation.state === "idle") setIsLoading(false);
+      // and when it's something else it means it's either submitting a form or
+      // waiting for the loaders of the next location so we start it
+      else setIsLoading(true);
+   }, [navigation.state]);
+
+   const location = useLocation();
 
    return (
       <html
@@ -219,6 +234,7 @@ function App() {
             <Links />
          </head>
          <body className="text-light dark:text-dark">
+            <Progress isAnimating={isLoading} key={location.key} />
             <div
                data-vaul-drawer-wrapper=""
                className="max-laptop:min-h-screen bg-white dark:bg-bg3Dark"
@@ -265,3 +281,43 @@ export function shouldRevalidate({
       ? false
       : defaultShouldRevalidate;
 }
+
+const Bar: React.FC<{
+   animationDuration: number;
+   progress: number;
+}> = ({ animationDuration, progress }) => (
+   <div
+      className="bg-blue-500 h-0.5 left-0 top-0 w-full fixed"
+      style={{
+         marginLeft: `${(-1 + progress) * 100}%`,
+         transition: `margin-left ${animationDuration}ms linear`,
+         zIndex: 99999,
+      }}
+   >
+      <div
+         className="h-full opacity-100 absolute block right-0"
+         style={{
+            boxShadow: "0 0 10px #3b82f6, 0 0 5px #3b82f6",
+            transform: "rotate(3deg) translate(0px, -4px)",
+            width: 100,
+         }}
+      />
+   </div>
+);
+
+const Progress: React.FC<{ isAnimating: boolean }> = ({ isAnimating }) => {
+   const { animationDuration, isFinished, progress } = useNProgress({
+      isAnimating,
+   });
+   return (
+      <div
+         style={{
+            opacity: isFinished ? 0 : 1,
+            pointerEvents: "none",
+            transition: `opacity ${animationDuration}ms linear`,
+         }}
+      >
+         <Bar animationDuration={animationDuration} progress={progress} />
+      </div>
+   );
+};
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
       "@splidejs/react-splide": "^0.7.12",
       "@stripe/react-stripe-js": "^2.4.0",
       "@stripe/stripe-js": "^2.2.2",
+      "@tanem/react-nprogress": "^5.0.51",
       "@tanstack/match-sorter-utils": "^8.15.1",
       "@tanstack/react-table": "^8.19.2",
       "aos": "^3.0.0-beta.6",

diff --git a/yarn.lock b/yarn.lock
@@ -1069,6 +1069,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.22.15":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.23.9":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
@@ -3539,6 +3546,14 @@
   resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
   integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
 
+"@tanem/react-nprogress@^5.0.51":
+  version "5.0.51"
+  resolved "https://registry.yarnpkg.com/@tanem/react-nprogress/-/react-nprogress-5.0.51.tgz#6cbdb52a0a27ecf845f61d809ef6fd45b063662d"
+  integrity sha512-YxNUCpznuBVA+PhjEzFmxaa1czXgU+5Ojchw5JBK7DQS6SHIgNudpFohWpNBWMu2KWByGJ2OLH2OwbM/XyP18Q==
+  dependencies:
+    "@babel/runtime" "^7.22.15"
+    hoist-non-react-statics "^3.3.2"
+
 "@tanstack/match-sorter-utils@^8.15.1":
   version "8.15.1"
   resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.15.1.tgz#715e028ff43cf79ece10bd5a757047a1016c3bba"
@@ -7401,7 +7416,7 @@ hogan.js@^3.0.2:
     mkdirp "0.3.0"
     nopt "1.0.10"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==