Page loading triggered when navigating to same page with different fragment

[lhoucinecherif]

Environment

• Operating System: Linux
• Node Version: v20.9.0
• Nuxt Version: 3.10.0
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: css, devtools
• Runtime Modules: -
• Build Modules: -

Reproduction

https://codesandbox.io/p/devbox/nuxt-link-test-fqzqn9

Describe the bug

When using NuxtLink components within a Nuxt 3 project, I've noticed that clicking on a NuxtLink with "#" as the value (e.g., <NuxtLink to="#">) triggers the 'page:loading:start' hook, even when navigating to the same page. This behavior is unexpected and can be confusing for users.

You can observe the loading even if you're already on the current page by clicking on the links (anchor links) provided in the example (https://codesandbox.io/p/devbox/nuxt-link-test-fqzqn9).

Additional context

I believe that clicking on a NuxtLink component with "#" as the value should not trigger the loading indicator, as it indicates navigation to the same page. This behavior should be consistent with user expectations and improve the overall user experience.

Thank you for your attention to this matter.

Logs

No response

[uniqueeest]

hello, @manniL ! Can I solve this problem?

[manniL]

@uniqueeest Sure, go ahead ☺️

[uniqueeest]

@manniL Should I stop the move from nuxtlink to # altogether?

[manniL]

@uniqueeest no no, the main part is not triggering the loading indicator if only the hash is different

[uniqueeest]

@manniL sorry. I'm a beginner, so I don't know where to fix it 😢

[manniL]

@uniqueeest Take a look at this PR as a starting point. Changing the logic there to "ignore" differences between the fragment should be fine

[manniL]

Actually, the reproduction is not using the NuxtLoadingIndicator nor useLoadingIndicator. Using it should work fine as the diffing is done there.

[manniL]

Re-opening as the "actual issue" is valid though (+renamed the title)

[danielroe]

The issue is here that vue router regards this as a 'navigation' event, so it will trigger middleware - and it is even possible to force reloading the page in this case (with a custom page-key passed to <NuxtPage>).

We start the loading when middleware begins, because if middleware perform data fetching this should be shown as part of the page loading.

As long as these two things are the case, I think it is correct that this triggers a loading event. Because you are creating a custom integration with the page:loading:start hook, it might be more appropriate to handle this edge case yourself. (Perhaps we could pass an argument to the hook to allow you to do this more easily?)