CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
user1929437
user1929437

Reputation: 473

Fetch hook and NuxtLoading component

I have a question about migration from asyncData pattern to fecth in Nuxt App. It seems straightforward, except for 1 thing - i can't get NuxtLoading component to act right. I've tried to watch for $fetchState and start loading with this.$nuxt.$loading.start(), but it's no use. The loading indicator flashes for mere second and disappears without any input on my part. Is there a trick to make it work like it does with asyncData?

Upvotes: 4

Views: 246

Answers (1)

kissu
kissu

Reputation: 46610

The whole point of using fetch() is to not block the render in between pages. The loader is here to let the user know when he will be able to expect the next page.

When you're using fetch(), you can use $fetchState.pending to make a conditional and display either a loader or a skeleton like this: https://buefy.org/documentation/skeleton/

The loading bar should still be triggered but it will probably be smoother (and maybe shorter visually), I'd recommend to let it live it's life.

Upvotes: 1

Related Questions