💄 Loading progress bar

package.json

@@ -24,6 +24,7 @@
     "axios-case-converter": "^1.1.1",
     "cookies-next": "^5.0.2",
     "next": "15.1.3",
+    "next-nprogress-bar": "^2.4.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",

src/pages/_app.tsx

@@ -3,6 +3,7 @@ import type { AppProps } from 'next/app'
 import { Box, createTheme, CssBaseline, ThemeProvider } from '@mui/material'
 import { Roboto } from 'next/font/google'
 import { CapAppBar } from '@/components/CapAppBar'
+import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar'
 import { useUserStore } from '@/services/user'
 import { useEffect } from 'react'
 import Head from 'next/head'
@@ -57,6 +58,12 @@ export default function App({ Component, pageProps }: AppProps) {
 
       <ThemeProvider theme={siteTheme}>
         <CssBaseline />
+        <ProgressBar
+          height="4px"
+          color={siteTheme.palette.primary.main}
+          options={{ showSpinner: false }}
+          shallowRouting
+        />
 
         <CapAppBar />
         <Box sx={{ minHeight: 'calc(100vh - 64px)' }}>