Frontend: Add NextNProgress component for progress indication during page transitions

apps/infoalloggi/package-lock.json

@@ -47,6 +47,7 @@
         "lucide-react": "^0.536.0",
         "next": "^15.3.4",
         "next-themes": "^0.4.6",
+        "nextjs-progressbar": "^0.0.16",
         "nodemailer": "^7.0.5",
         "nodemailer-html-to-text": "^3.2.0",
         "nuqs": "^2.4.3",
@@ -7456,6 +7457,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz",
+      "integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -15269,6 +15276,21 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs-progressbar": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.16.tgz",
+      "integrity": "sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/nprogress": "^0.2.0",
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0"
+      }
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -15622,6 +15644,12 @@
         "which": "bin/which"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "license": "MIT"
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",

apps/infoalloggi/package.json

@@ -58,6 +58,7 @@
     "lucide-react": "^0.536.0",
     "next": "^15.3.4",
     "next-themes": "^0.4.6",
+    "nextjs-progressbar": "^0.0.16",
     "nodemailer": "^7.0.5",
     "nodemailer-html-to-text": "^3.2.0",
     "nuqs": "^2.4.3",
@@ -143,4 +144,4 @@
   "ct3aMetadata": {
     "initVersion": "7.9.0"
   }
-}
+}

apps/infoalloggi/src/pages/_app.tsx

@@ -13,6 +13,7 @@ import { Layout } from "~/components/Layout";
 import { inter } from "~/utils/fonts";
 import "react-day-picker/dist/style.css";
 import { NuqsAdapter } from "nuqs/adapters/next/pages";
+import NextNProgress from "nextjs-progressbar";
 
 type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>;
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
@@ -72,7 +73,7 @@ const MyApp = ({
             `}</style>
 
             <Toaster position="top-right" reverseOrder={false} />
-
+            <NextNProgress options={{ showSpinner: false }} />
             {getLayout(<Component {...pageProps} />)}
           </ThemeProvider>
         </SessionProvider>