feat: page load progress bar

package-lock.json

@@ -32,6 +32,7 @@
         "date-fns": "^3.6.0",
         "lucide-react": "^0.367.0",
         "next": "14.1.4",
+        "next-nprogress-bar": "^2.3.11",
         "next-themes": "^0.3.0",
         "react": "^18",
         "react-dom": "^18",
@@ -4935,6 +4936,14 @@
         }
       }
     },
+    "node_modules/next-nprogress-bar": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/next-nprogress-bar/-/next-nprogress-bar-2.3.11.tgz",
+      "integrity": "sha512-OjSvsQwgSWa2qBMYO478QreGG9Jt82tr4wTQptmiyzNqqjzHCyKZNkhANnzPrjuFAoelIvmruJuakODofSnvTQ==",
+      "dependencies": {
+        "nprogress": "^0.2.0"
+      }
+    },
     "node_modules/next-themes": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
@@ -4993,6 +5002,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

package.json

@@ -33,6 +33,7 @@
     "date-fns": "^3.6.0",
     "lucide-react": "^0.367.0",
     "next": "14.1.4",
+    "next-nprogress-bar": "^2.3.11",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",

src/app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { cn } from "@/lib/utils";
+import PageProgressBar from "@/providers/page-progress-bar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -26,7 +27,7 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <PageProgressBar>{children}</PageProgressBar>
           <Toaster />
         </ThemeProvider>
       </body>

src/providers/page-progress-bar.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
+
+const PageProgressBar = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      {children}
+      <ProgressBar
+        height="4px"
+        color="#00f5a0"
+        options={{ showSpinner: false }}
+        shallowRouting
+      />
+    </>
+  );
+};
+
+export default PageProgressBar;