<NuxtLoadingIndicator> and loading events

[pi0]

When <NuxtLoadingIndicator> landed, we should introduce a controller API (TODO: issue pending in framework). This should address a long time waiting for a feature for Nuxt 2 (#7893, nuxt-community/axios-module#247 (comment)) in a consistent way with Nuxt 3.

[acidjazz]

curious - are we going to have any methodology/documentation to hooking this into useFetch and/or $fetch so that our indicator is in line our external calls?

[acidjazz]

I'd like to share a hack I've been using just to see if it's useful:

I have an Api lib/class I use to interact with my API that wraps around ohmyfetch - and from it i set fetchOptions to fire off my own start/finish cal hooks:

    fetchOptions.onRequest = () => this.nuxtApp.callHook('page:start')
    fetchOptions.onResponse = () => this.nuxtApp.callHook('page:finish')

I get multiple loading indicators for each call if its multiple unlike v2 which would combine them - but it works!

demonstrated in my laravel+nuxtjs template https://github.com/fumeapp/laranuxt

[snowdream]

I'd like to share a hack I've been using just to see if it's useful:

I have an Api lib/class I use to interact with my API that wraps around ohmyfetch - and from it i set fetchOptions to fire off my own start/finish cal hooks:

    fetchOptions.onRequest = () => this.nuxtApp.callHook('page:start')
    fetchOptions.onResponse = () => this.nuxtApp.callHook('page:finish')

I get multiple loading indicators for each call if its multiple unlike v2 which would combine them - but it works!

demonstrated in my laravel+nuxtjs template https://github.com/fumeapp/laranuxt

It works!

Thank you !

[manniL]

See #16351 for other options, as calling hooks could have other side effects.

[acidjazz]

sorry @manniL looking through #16351 is there an option you prefer?

[mrleblanc101]

Hi,
Should this get prioritized, fast tracked ? This would bring feature parity with Nuxt 2. Also, maybe I'm wrong, but it does not seem like an overly complicated thing to implement ?

[manniL]

@mrleblanc101 A PR is absolutely welcome! As this is already possible in userland (see answer in #16351), the priority is set to "nice-to-have" ☺️

[acidjazz]

Preferably a way to do this so that multiple fetch calls balance out to one single load bar - how nuxt2 worked.

[mrleblanc101]

@manniL I don't understand your workaround. You say callHook can have dangerous side effect

See #16351 for other options, as calling hooks could have other side effects.

You link to another issue where you also mention to use callHook without saying what are the side effect or an alternative without side effects 🤔

You could call the page:start/page:finish hook as needed but that might have unwanted side effects.

What is the solution in user land without side effect ?

[acidjazz]

@mrleblanc101 I think he means that current solution for now w/ the potential side effect which lowers the priority of this feature

[mrleblanc101]

@acidjazz Not sure. He says:
See #16351 for "other options".

Why would I go see #16351 from 14 days ago since your message from 2 months ago in this very own thread has the same solution.

[manniL]

I meant specifically an own implementation approach as @Gaspadlo did #16351 (comment) for now. Sorry if that was unclear.