mirror of
https://github.com/andwati/dokploy.git
synced 2026-11-07 20:45:17 +00: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
|
disableTransitionOnChange
|
||||||
forcedTheme={Component.theme}
|
forcedTheme={Component.theme}
|
||||||
>
|
>
|
||||||
<NextTopLoader />
|
<NextTopLoader color="hsl(var(--sidebar-ring))" />
|
||||||
<Toaster richColors />
|
<Toaster richColors />
|
||||||
<SearchCommand />
|
<SearchCommand />
|
||||||
{getLayout(<Component {...pageProps} />)}
|
{getLayout(<Component {...pageProps} />)}
|
||||||
|
|||||||
Reference in New Issue
Block a user