apal21 / nextjs-progressbar

A simple Next.js progressbar component using NProgress.

Home Page:https://www.npmjs.com/package/nextjs-progressbar

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Progress bar runs on page load / refresh on Next ^10.2.0

vajajak opened this issue · comments

Hey! I noticed that since Next.js 10.2.0 (specifically - when transitioning from 10.1.3 to 10.2.0), the behavior for running progress bar on page load or refresh has changed.
Earlier, the progress bar would not show up during the initial load / reload, but after the update the progress bar is always present.
Would it be possible to add some kind of option to disable this behavior?
I think it looks better when the progress bar is only visible in page transitions (where there are actual js page chunks blocking the transition - render). In the initial load, there are no render-blocking bundles and hence the progressbar is unnecessary in my opinion.
Thanks in advance!

Ohh I didn't notice that. Thanks for creating an issue.

I'll check this thing and I'm planning to add an option to enable/disable this. Let me know your thoughts.

Also, PRs/Contributions are welcomed.

Hey @vajajak, I checked with the next version 10.2.2 and I couldn't reproduce the issue. This issue may not happen if you clear your node_modules and install all the packages.

If possible, could you please share the repo having this issue?

@apal21 Thanks for your commitment in resolving this issue. You're right that the issue does not arise in a new project created with create-next-app on 10.2.2.
I noticed that in my project, on ^10.2.0 the Router.events.on('routeChangeStart',...) fires on the page load, which is causing the progressbar to show up during the initial load.
I'll need to investigate this a bit further. I'll get back to you once I have more insight.
Meanwhile, if you wanna have a look, here's the repo

Cool. I'll clone this repo and test. For now, I'm closing this issue since it is resolved in the latest patch version.

Hey, while I haven't been able to determine the cause of the problem yet, I found out that the 'routeChangeStart' event fires with the shallow option set to true.
What I also wanted is to hide the loading bar when shallowly navigating (eg. search - editing route params, loading indicator is shown elsewhere), so i opened a PR which adds this feature. Please have a look. This also temporarily fixes my issue until I can find a better solution.