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:
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.tsxin 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.
