Add nprogress

elpassion · Feb 23, 2024 · 2fc6211 · 2fc6211
1 parent 8e09567
commit 2fc6211
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 2 deletions.
diff --git a/apps/web-remix/app/components/progressBar/PageProgress.tsx b/apps/web-remix/app/components/progressBar/PageProgress.tsx
@@ -0,0 +1,18 @@
+import React, { useEffect } from "react";
+import { useNavigation } from "@remix-run/react";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import "./pageProgress.css";
+
+NProgress.configure({ showSpinner: false });
+
+export const PageProgress: React.FC = () => {
+  const { state } = useNavigation();
+
+  useEffect(() => {
+    if (state === "loading") NProgress.start();
+    if (state === "idle") NProgress.done();
+  }, [state]);
+
+  return null;
+};
diff --git a/apps/web-remix/app/components/progressBar/pageProgress.css b/apps/web-remix/app/components/progressBar/pageProgress.css
@@ -0,0 +1,11 @@
+#nprogress .bar{
+    @apply !bg-primary-500 !h-[1.5px]
+}
+
+#nprogress .spinner-icon{
+    @apply !border-t-primary-600 !border-l-primary-600
+}
+
+#nprogress .peg{
+    @apply !shadow-xl !shadow-primary-500
+}
diff --git a/apps/web-remix/app/root.tsx b/apps/web-remix/app/root.tsx
@@ -1,5 +1,6 @@
 import { withSentry } from "@sentry/remix";
 import type { LinksFunction } from "@remix-run/node";
+import Modal from "react-modal";
 import {
   isRouteErrorResponse,
   Links,
@@ -13,7 +14,7 @@ import { Toaster } from "~/components/toasts/Toaster";
 import "./tailwind.css";
 import { GlobalNotFound } from "~/components/errorBoundaries/GlobalNotFound";
 import { GlobalRuntime } from "~/components/errorBoundaries/GlobalRuntime";
-import Modal from "react-modal";
+import { PageProgress } from "~/components/progressBar/PageProgress";
 
 Modal.setAppElement("#_root");
 
@@ -50,6 +51,7 @@ function App() {
       </head>
       <body className="bg-neutral-950">
         <Toaster />
+        <PageProgress />
         <Outlet />
         <ScrollRestoration />
         <Scripts />

diff --git a/apps/web-remix/app/routes/_dashboard.$organizationId.tsx b/apps/web-remix/app/routes/_dashboard.$organizationId.tsx
@@ -1,5 +1,5 @@
 import { Avatar, Button, Icon, IconButton } from "@elpassion/taco";
-import { DataFunctionArgs, json, LoaderFunctionArgs } from "@remix-run/node";
+import { json, LoaderFunctionArgs } from "@remix-run/node";
 import {
   Link,
   Outlet,

diff --git a/apps/web-remix/package.json b/apps/web-remix/package.json
@@ -52,6 +52,7 @@
     "lru-cache": "^10.2.0",
     "markdown-to-jsx": "^7.4.1",
     "morgan": "^1.10.0",
+    "nprogress": "^0.2.0",
     "phoenix": "^1.7.7",
     "rc-menu": "^9.12.0",
     "rc-select": "^14.11.0",
@@ -89,6 +90,7 @@
     "@types/lodash.merge": "^4.6.7",
     "@types/lodash.startcase": "^4.4.7",
     "@types/morgan": "^1.9.5",
+    "@types/nprogress": "^0.2.3",
     "@types/phoenix": "^1.6.0",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",

diff --git a/apps/web-remix/pnpm-lock.yaml b/apps/web-remix/pnpm-lock.yaml