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
JulieCezar
JulieCezar•10mo ago
ofc it's called nextjs-progressbar
JulieCezar
JulieCezar•10mo ago
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.
JulieCezar
JulieCezar•10mo ago
works with both app and pages router as far as I k now
Y7YA
Y7YA•10mo ago
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
JulieCezar
JulieCezar•10mo ago
Can you show an example of such an instand load and slow progressbar? I am using it, but havent had such an experience
Y7YA
Y7YA•10mo ago
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?
Y7YA
Y7YA•10mo ago
Here's an example: The page loads instantly but the loading bar insists on showing up everytime
Y7YA
Y7YA•10mo ago
It should not show up the 2nd time since the page has already been loaded and cached by nextjs
JulieCezar
JulieCezar•10mo ago
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
Y7YA
Y7YA•10mo ago
It's a huge problem since it's distracting and the page actually loads faster than the progress
JulieCezar
JulieCezar•10mo ago
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*
Y7YA
Y7YA•10mo ago
yeah my problem is how do I detect this cacheing not very clear on nextjs docs
JulieCezar
JulieCezar•10mo ago
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
Y7YA
Y7YA•10mo ago
exactly and the loading still shows despite the preload
JulieCezar
JulieCezar•10mo ago
so if that's technically cache, then idk how you would supose to do it
Y7YA
Y7YA•10mo ago
i'm fearful that there's just no way of detecting it
JulieCezar
JulieCezar•10mo ago
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
Y7YA
Y7YA•10mo ago
yh but it's not important whether i care or not, my clients care
JulieCezar
JulieCezar•10mo ago
oh dang
Y7YA
Y7YA•10mo ago
i personally dont mind
JulieCezar
JulieCezar•10mo ago
that's another thing haha I found this part
JulieCezar
JulieCezar•10mo ago
So if you really want to make it work you will probably need a custom solution...
Y7YA
Y7YA•10mo ago
yeah I read it but it's not relevant to this unless I missed something
JulieCezar
JulieCezar•10mo ago
But even with that I don't know if you can directly access the nextjscache
Y7YA
Y7YA•10mo ago
quite crazy how I don't have control of such a simple feature
JulieCezar
JulieCezar•10mo ago
More crazy how your clients are so picky 😂
JulieCezar
JulieCezar•10mo ago
No description
JulieCezar
JulieCezar•10mo ago
try setting showOnShallow to false it's for the pages router but it might help...
Y7YA
Y7YA•10mo ago
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
JulieCezar
JulieCezar•10mo ago
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?
Want results from more Discord servers?
Add your server