Component work on first load but not after

[harkor]

Hello,

I just discovered your solution.

Thanks for your work.

When I load my app and click on my navigation, toploader work like a charm, if I change page the loader work but after that when I change to another page, toploader never be displayed.

Reproduction of the issue

Thanks

[TheSGJ]

Thanks for addressing this issue, the main reason for this to be happening is because right now the NextTopLoader component is only compatible for the Server Side Rendered anchor tags (i.e <Link />) in the next js. I saw that you have used the Navigation in the page.tsx and [slug]/page.tsx, and when you use Link component from next/link that is mainly used to make a Client Side transitions for the page routes, so eventually the Navigation component is Client Side Rendered.

One of the best practices is to add your <Navigation /> in the root of your application which is app/layout.tsx, this will also render the Navigation component on the server for all of your page routes and NextTopLoader should work fine.

Example to render the Navigation component on the Server

Thanks again for addressing this issue, and I'll try to make NextTopLoader component work with Client Side Rendered links in the future updates.

[gwendall]

Thanks for sharing. I can see of two ways to easily enable it for client-side rendered (you probably thought of them too but worth sharing!):

• use a MutationObserver in the useEffect hook to catch click events on dynamically inserted links
• use a global click event handler and detect in it if the clicked element is a link to trigger the progress indicator

Is it a direction you are considering?

[gwendall]

Made a PR for option 2: #7

[TheSGJ]

I've merged the PR (#7), it added the client side detection for the navigation. With the version 1.3.2 of nextjs-toploader should work for client side rendered links.