From 339a45c946c0495a1ff91dba832a2da04c52f87e Mon Sep 17 00:00:00 2001
From: mehedi-hasan <mdmehedihasan2810@gmail.com>
Date: Wed, 1 May 2024 17:59:16 +0600
Subject: [PATCH] feat: page load progress bar

---
 package-lock.json                   | 14 ++++++++++++++
 package.json                        |  1 +
 src/app/layout.tsx                  |  3 ++-
 src/providers/page-progress-bar.tsx | 18 ++++++++++++++++++
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/providers/page-progress-bar.tsx

diff --git a/package-lock.json b/package-lock.json
index a52c056..c8206ff 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index bdfa7b9..029082f 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 857ada1..6723e7d 100644
--- a/src/app/layout.tsx
+++ b/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>
diff --git a/src/providers/page-progress-bar.tsx b/src/providers/page-progress-bar.tsx
new file mode 100644
index 0000000..442dfc0
--- /dev/null
+++ b/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;