Create a loading indicator or progress bar in your application directory in NextJS: a step-by-step guide

Question

I developed a large web application using NextJS 13, with the first version using Pages Router.

After completing almost the entire website, I successfully migrated to the Application Directory.

This migration is not essentially about upgrading some new routing functionality, but I want to change the large SASS compiled files imported in _app.tsx to get better website load times.

Since loading was a big issue for this project, I started using MUI to style each component, which was just a CSS-in-JS solution.

But the problem I found in the new application directory is the router events, I had a progress bar indicator from the next-n-progress package, but now it doesn't work, the user single Click the link, the application takes some time to load the next page.

This problem is not a problem for SSR pages because I have placed the loading.tsx file in the root directory of each page, but for pages with client configuration, the problem still exists.

For example, homepage, login and registration, etc.

I tried another progress bar package that supports the new application directory, but it didn't show up at all.

This is the component responsible for layout: GitHub component permalink

Is there any way to create a new progress bar using this new NextJS 13 update?

Answer 1

renew

I found this to be a common issue in the new Next.js 13 App Directory, and there are a few open issues related to it, including multiple issues encountered in App Router Behaviors.

So, I managed to use next-n-progress, but I noticed that it only works by using the linked component because it triggers loading to show the progress bar and it has a prefetch Benefits of all links present on the viewport.

So, in the meantime, for simple navigation cases, continue to use Link instead of Router.push.