feat: Add top-loading progress bar

Adds a top-loading progress bar that appears during page transitions to improve user experience by providing visual feedback during navigation.

- Integrated the `nextjs-toploader` package, a lightweight and efficient solution for Next.js applications.
- The progress bar is initialized in the main `_app.tsx` file to ensure it's active across the entire application.
- This feature works seamlessly with the Next.js App Router and does not interfere with server-side rendering (SSR).

apps/dokploy/package.json

@@ -112,7 +112,6 @@
 		"i18next": "^23.16.8",
 		"input-otp": "^1.4.2",
 		"js-cookie": "^3.0.5",
-		"yaml": "2.8.1",
 		"lodash": "4.17.21",
 		"lucide-react": "^0.469.0",
 		"micromatch": "4.0.8",
@@ -120,6 +119,7 @@
 		"next": "^15.3.2",
 		"next-i18next": "^15.4.2",
 		"next-themes": "^0.2.1",
+		"nextjs-toploader": "^3.9.17",
 		"node-os-utils": "1.3.7",
 		"node-pty": "1.0.0",
 		"node-schedule": "2.1.1",
@@ -153,6 +153,7 @@
 		"use-resize-observer": "9.1.0",
 		"ws": "8.16.0",
 		"xterm-addon-fit": "^0.8.0",
+		"yaml": "2.8.1",
 		"zod": "^3.25.32",
 		"zod-form-data": "^2.0.7"
 	},

apps/dokploy/pages/_app.tsx

@@ -7,6 +7,7 @@ import Head from "next/head";
 import Script from "next/script";
 import { appWithTranslation } from "next-i18next";
 import { ThemeProvider } from "next-themes";
+import NextTopLoader from "nextjs-toploader";
 import type { ReactElement, ReactNode } from "react";
 import { SearchCommand } from "@/components/dashboard/search-command";
 import { Toaster } from "@/components/ui/sonner";
@@ -57,6 +58,7 @@ const MyApp = ({
 				disableTransitionOnChange
 				forcedTheme={Component.theme}
 			>
+				<NextTopLoader />
 				<Toaster richColors />
 				<SearchCommand />
 				{getLayout(<Component {...pageProps} />)}

pnpm-lock.yaml

@@ -346,6 +346,9 @@ importers:
       next-themes:
         specifier: ^0.2.1
         version: 0.2.1(next@15.3.2(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      nextjs-toploader:
+        specifier: ^3.9.17
+        version: 3.9.17(next@15.3.2(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       node-os-utils:
         specifier: 1.3.7
         version: 1.3.7
@@ -6241,6 +6244,13 @@ packages:
       sass:
         optional: true
 
+  nextjs-toploader@3.9.17:
+    resolution: {integrity: sha512-9OF0KSSLtoSAuNg2LZ3aTl4hR9mBDj5L9s9DZiFCbMlXehyICGjkIz5dVGzuATU2bheJZoBdFgq9w07AKSuQQw==}
+    peerDependencies:
+      next: '>= 6.0.0'
+      react: '>= 16.0.0'
+      react-dom: '>= 16.0.0'
+
   node-abort-controller@3.1.1:
     resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==}
 
@@ -6339,6 +6349,9 @@ packages:
     resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
     deprecated: This package is no longer supported.
 
+  nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -13714,6 +13727,14 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
+  nextjs-toploader@3.9.17(next@15.3.2(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      next: 15.3.2(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      nprogress: 0.2.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   node-abort-controller@3.1.1: {}
 
   node-addon-api@5.1.0: {}
@@ -13798,6 +13819,8 @@ snapshots:
       gauge: 3.0.2
       set-blocking: 2.0.0
 
+  nprogress@0.2.0: {}
+
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}