Top loader bar | App Router
Is there any good solution for a top loader progress bar for when navigating between pages using NextJS router?
All these NProgress solutions are not good enough as they create a fake loading bar even when the page is already cached and immediately loaded by NextJS. This makes the entire app feel slow even though the pages are loading instantly.
My plan was to create a custom solution but for that I need some means of knowing when the page has already been cached by NextJS, and if so, skip the loading bar. But I couldn't find anything on NextJS docs that help with achieving this.
I feel like this is an essential feature for good UX. The current options I have are not very good:
- Make the app feel slow due to fake loader bars on instantly loading pages
- Add a disruptive
loading.tsx in place of the loading content which is bad UX for data I expect to load quickly.
- Not add any form of feedback and leave the user guessing whether features are working or not.31 Replies
ofc
it's called nextjs-progressbar
npm
nextjs-progressbar
Nprogress component for Next.js app.. Latest version: 0.0.16, last published: a year ago. Start using nextjs-progressbar in your project by running
npm i nextjs-progressbar. There are 18 other projects in the npm registry using nextjs-progressbar.works with both app and pages router as far as I k now
I already tried it, it has the problem I mentioned of showing a progressbar even on pages that load instantly
All of these options available do not work tried them all
Unless something new has come out in the last month
Then I need someway of detecting when nextjs has already cached a page
Can you show an example of such an instand load and slow progressbar?
I am using it, but havent had such an experience
Click between pages
If the loading bar shows on a page that you have already loaded then that's the problem
do you have an example of it working?
Here's an example:
The page loads instantly but the loading bar insists on showing up everytime
It should not show up the 2nd time since the page has already been loaded and cached by nextjs
I see
Personally I don't think it's much of a problem since it's still pretty fast
And it shows the user that he actualy goes to another p age
that being said
It's a huge problem since it's distracting and the page actually loads faster than the progress
If you have a problem with it, you can fork this project
Then just add a few lines of code to override it if the pacge is caches
cached*
yeah my problem is how do I detect this cacheing
not very clear on nextjs docs
yeah that I dont know either haha
But even then
Nextjs will preload pages when it sees you have links to them while you are on a page
exactly and the loading still shows despite the preload
so if that's technically cache, then idk how you would supose to do it
i'm fearful that there's just no way of detecting it
well yes, since it technically is a page change
True...
I have a similar behaviour on my site and honestly I dont really care...
I would rather have it for when I have slow page loads, than optimizing this case when it's already cached
yh but it's not important whether i care or not, my clients care
oh dang
i personally dont mind
that's another thing haha
I found this part
Building Your Application: Caching | Next.js
An overview of caching mechanisms in Next.js.
So if you really want to make it work you will probably need a custom solution...
yeah I read it but it's not relevant to this unless I missed something
But even with that I don't know if you can directly access the nextjscache
quite crazy how I don't have control of such a simple feature
More crazy how your clients are so picky 😂
try setting showOnShallow to false
it's for the pages router but it might help...
they'll just be like "why's the page so slow, we paid for fast pages". how am i going to explain "yh its fast dw its just the loading bar is slow"
without that feature might as well use a multiple page application
if i'm going to have page loader on every single page anyway
Sucks man, good luck
I thought of a "hacky" way you could get around this... but not sure if it would work
You can keep like a Jotai atom where you store which pages you visited... then skip progress bar if you already visited the page...
This might fix part of it, but still wont work with pages that next prefetches for you
Did you try making an issue for this?