feat: Add top-loading progress bar #2735
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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).
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.
Contributor
|
Can you send a screenshot on how it looks like |
Author
I have added the screenshot to the PR check it out. |
Author
|
@Siumauricio can you take a look at this |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds a top-loading progress bar that appears during page transitions to improve user experience by providing visual feedback during navigation.
nextjs-toploaderpackage, a lightweight and efficient solution for Next.js applications._app.tsxfile to ensure it's active across the entire application.What is this PR about?
This PR introduces a modern top-loading progress bar component to Dokploy, which shows up during page transitions and long-running actions. The loader enhances UX by giving users visual feedback whenever navigation or background operations occur.
Checklist
Before submitting this PR, please make sure that:
✓ You created a dedicated branch based off the canary branch
✓ You have read the suggestions in the CONTRIBUTING.md
✓ You have tested this PR locally (navigation, slow network, edge cases)
✓ You added any relevant unit or integration tests (if applicable)
✓ You added or updated documentation (if needed)
✓ You’ve ensured the loader matches Dokploy’s design language (colors, sizes)
Issues related (if applicable)
Closes #2729
Implementation Details & Screenshots
How it works
A new TopLoader component (or ProgressBar) is added, which uses a lightweight approach (e.g. using nprogress under the hood or a custom CSS + JS solution).
The loader is triggered on route navigation start and completes on route change complete (or on error).
The loader is integrated in app/layout.tsx (or the equivalent root layout) so it wraps all pages.
Edge cases such as aborted navigations or fast transitions are handled (e.g., minimal delay before showing, canceling if navigation resolves too quickly).
Styles are minimal and follow Dokploy’s theme (e.g. using existing CSS variables or Tailwind class names).