How to create a Loading Indicator or a Progress Bar in NextJS's App Directory?

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

After completing almost the entire website, I managed to migrate to the App Directory.

This migration was not essentially to upgrade for some new routing features, but I wanted to change my SASS's Large compiled file imported in the _app.tsx for better website loading time.

Since the loading was quite a big issue for this project, I started using MUI with the styling of the each component, simply a CSS-in-JS solution.

But the problem I found with the new App 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 clicks on a link and the app takes some small time to load the next page.

The problem is not an issue for SSR pages since I have put a loading.tsx file in the root of each page, but it persists for pages with client-side configuration.

Like the Home Page, Sign-in & Sign-up, etc.

I tried another package for the Progress Bar that supports the new app directory, but it is not showing up at all.

This is the component responsible for the Layout:
GitHub Component permalink

Is there any way to create a new progress bar with this new NextJS 13 Update?

UPDATE

I found that it is a common issue with the new Next.js 13 App Directory, and there are some open issues about it, including multiple problems encountered in the App Router Behaviors.

So, I managed to use next-n-progress, but I noticed that it only works by USING LINK COMPONENT, since it triggers the loading for the progress bar to appear, plus it has a benefit of prefetching all Links present on the view-port.

So, meanwhile, just keep using Link instead of Router.push for simple navigation cases.