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} />)}