Slow route navigation

[codewithnazim]

I am using lates app router, iam facing issues in route navigation, the navigation take to much time to navigate to other routes with Link and router imorted from next/navigation, is there any way to show some UI when page takes time to navigate , there is loading component in latest feature but its working only when the page is navigated on the route, I want loading on the current page if its take time to switch pages, please help I am stucked.

[SidKH]

Hi 👋

By default, the navigation will occur after the data on the route you navigate to is loaded.

If you want to speed up this app, you can add a loading.js or Suspense fallback for the route you navigate to. This way, the navigation will happen immediately showing the fallback from loading.js until the data is loaded.

CleanShot.2024-04-29.at.15.42.44.mp4

[codewithnazim]

So i need to add loading.js file in every route? i have used loading.js in the root of app.

[abdullah43577]

@codewithnazim do we need to add the loading.js to every route, I also have it in my root layout already.
I only noticed that it works in the root but not in deep nested layouts.
What did you find to work?

[linh-n]

Hi, you can use the new onNavigate event and useOptimistic hook to provide visual feedback on the current page.

I've draft a general guideline in this article