added router loader

velascoandres · May 7, 2024 · ceaa222 · ceaa222
1 parent cb2631a
commit ceaa222
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "lucide-react": "^0.334.0",
     "next": "^14.0.4",
     "next-auth": "^4.24.5",
+    "next-nprogress-bar": "^2.3.11",
     "next-themes": "^0.2.1",
     "postgres": "^3.4.3",
     "react": "18.2.0",

diff --git a/src/app/_shared/components/navigation/navigation-progress.tsx b/src/app/_shared/components/navigation/navigation-progress.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import React from 'react'
+import { AppProgressBar as NProgressBar } from 'next-nprogress-bar'
+
+export const NavigationProgress = () => {
+  return (
+    <NProgressBar
+      color="#63e"
+      options={{ showSpinner: false }}
+      shallowRouting
+    />
+  )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { TRPCReactProvider } from '@/trpc/react'
 
 import { AuthProvider } from './_auth/components/auth-provider'
 import { ModalContainer } from './_shared/components/modal/modal-container'
+import { NavigationProgress } from './_shared/components/navigation/navigation-progress'
 import { ThemeProvider } from './_shared/components/theme/theme-provider'
 import { Toaster } from './_shared/components/ui/toaster'
 
@@ -42,6 +43,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`font-sans ${dm_sans.variable}`}>
+        <NavigationProgress />
         <AuthProvider>
           <ThemeProvider
             attribute="class"