feat(nuxt): move loading api behind hooks

[huang-julien]

🔗 Linked issue

resolve #15232
resolve #23568
resolves #14221

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Hi 👋
This PR moves the loading mechanism behind nuxt hooks and bring some improvements to NuxtLoadingIndicator.

1. New hooks

loading states are now triggered by page:loading:start and page:loading:end (their callHook are not awaited for perf reasons)

2. useLoadingIndicator is now exported and auto-imported

It keeps local refs to handle the loading state. The loading state hasn't been moved behind a plugin or a global var to avoid having to compute it when not needed.
useLoadingIndicator hook into page:loading:start and page:loading:end to know when the loading state changes

3. Controllable NuxtLoadingIndicator

A request from some users was to be able to control the loading indicator. Since we now expose useLoadingIndicator within NuxtLoadingIndicator, users can trigger the start function or simply call the new hooks to control the state.

📝 Checklist

• I have linked an issue or discussion.
• TODO: I have updated the documentation accordingly.
• TODO: Tests ?

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Nuxt Docs	Edit on Studio ↗︎	View Live Preview	71c4362

[divine]

Hello,

Sorry to bump, is there any ETA for this feature to be merged?

cc @danielroe

Thanks!

[danielroe]

It'll need to wait for the next minor.

[divine]

Hello,

Sorry to bump, since the minor is coming soon does it mean this can be merged?

Thanks!

[warrenseine]

I'm also eagerly waiting for this fix. I have confirmed it works as expected and have been using a custom build including this patch in production for a few weeks now. I'd love to see it merged.

[Atinux]

Could you also link to the useLoadingIndicator() page from https://nuxt.com/docs/api/components/nuxt-loading-indicator as well?

[Atinux]

Is it possible to trigger a release to test this on a project @danielroe ?

[danielroe]

/trigger release

[github-actions]

🚀 Release triggered! You can now install nuxt@npm:nuxt-nightly@pr-24010

[Atinux]

/trigger release

[github-actions]

🚀 Release triggered! You can now install nuxt@npm:nuxt-nightly@pr-24010

[BenAkroyd]

⚠️ Breaking change (fix or feature that would cause existing functionality to change)
^ This is checked in the PR description. Was this in err? If not, would you mind explicitly identifying the breaking change?