Add loading bar

apps/website/package.json

@@ -44,6 +44,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.314.0",
     "next": "^14.2.1",
+    "next-nprogress-bar": "^2.3.14",
     "node-loader": "^2.0.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",

apps/website/src/app/components/ProgressBarProvider.tsx

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

apps/website/src/app/layout.tsx

@@ -5,6 +5,7 @@ import { Inter } from "next/font/google";
 import { I18nProvider } from "~/i18n/client";
 import { TRPCReactProvider } from "~/trpc/react";
 import NavBar from "./components/NavBar";
+import ProgressBarProvider from "./components/ProgressBarProvider";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -29,7 +30,9 @@ export default function RootLayout({
         <I18nProvider>
           <TRPCReactProvider>
             <NavBar />
-            {children}
+            <ProgressBarProvider>
+              {children}
+            </ProgressBarProvider>
           </TRPCReactProvider>
         </I18nProvider>
       </body>