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:
google-labs-jules[bot]
2025-10-01 03:35:29 +00:00
parent 15c81a0982
commit e4aefe7f9d
2 changed files with 1 additions and 1 deletions

View File

@@ -58,7 +58,7 @@ const MyApp = ({
disableTransitionOnChange
forcedTheme={Component.theme}
>
<NextTopLoader />
<NextTopLoader color="hsl(var(--sidebar-ring))" />
<Toaster richColors />
<SearchCommand />
{getLayout(<Component {...pageProps} />)}

View File