mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-06-18 13:45:23 +02:00
feat: Add theme-aware top-loading progress bar
This commit introduces a top-loading progress bar that provides visual feedback during page transitions, improving the user's navigation experience. - **Package Integration:** The `nextjs-toploader` package has been added to provide a lightweight and efficient progress bar solution for Next.js. - **Theme-Aware Color:** The progress bar's color is dynamically set using the `hsl(var(--sidebar-ring))` CSS variable, ensuring it automatically adapts to the application's current theme (light or dark mode). - **Implementation:** The `NextTopLoader` component is integrated into the main `_app.tsx` file, making it active across the entire application.
This commit is contained in:
@@ -58,7 +58,7 @@ const MyApp = ({
|
||||
disableTransitionOnChange
|
||||
forcedTheme={Component.theme}
|
||||
>
|
||||
<NextTopLoader />
|
||||
<NextTopLoader color="hsl(var(--sidebar-ring))" />
|
||||
<Toaster richColors />
|
||||
<SearchCommand />
|
||||
{getLayout(<Component {...pageProps} />)}
|
||||
|
||||
Reference in New Issue
Block a user