slow switching btw pages on app dir
I have loading components but they doesn’t appear when I click to navigate to other pages. They appears only when I have switched to the page for the second time. I put 3g connection on the test to show it more clearly
4 Replies
Does the same thing happen in production? After you build and start?
Yep
There are a few reason I can think of... But I'm not necessarily saying any of them are true....
1st case could be if you are doing some logic in getServerSideProps which take some time and delay the routing to the new page... It might be better to just switch, then validate what you need and if it's ok show data
2nd case is because the page you are trying to access has a lot of JS and is quite big, or has some big package. Which again delays the page loading. In this case you can try to dynamically load bigger components to remove some of that initial JS load. (check out @next/bundle-analyzer to see what packages and pages might be problematic)
3rd case if you are not doing getServerSideProps then it's most likely because of how NextJS routing works... To work around this you would need a wrapper for your app component, where you have a event listener who watches for pageChange events and then you inject a loader into the root where the pages will be rendered. Something like so https://medium.com/@remoteupskill/how-to-manage-loading-elegantly-in-your-next-js-application-5debbfb4cace
Medium
How To Handle Loading Between Page Changes in Next.js : )
If you are short of time, here is the quick version:
in the 3rd case it might even be simpler for you since you have a sidebar dashboard... In the component where you render your pages you can simply watch for pageChange events and then inbetween routeChangeStart and routeChangeEnd you show that loader