Nuxt.js: Manually set loading page transition?

[sbefort]

Is there a way to manually set the loading page transition to use the same animation in other cases that are not route changes?

_{This question is available on Nuxt.js community (#c620)}

[pi0]

You can use something like this:

            async login() {
                this.$root.$loading.start();
                try {
                    // ...
                } catch (e) {
                    console.log(e.message);
                }
                this.$root.$loading.finish();
            }

Or even without this :)) (Not recommended)

window.$nuxt.$root.$loading.start()

[sbefort]

Thanks that works awesome.

[sbefort]

This works on the client side in the mounted life cycle method. But when I refresh the page, I get Vue warn]: Error in mounted hook: "TypeError: this.$root.$loading.start is not a function" in my client-side console. Is my component being mounted before that function is available when I get a server-side refresh? Is there any way around this? Thanks!

[pi0]

@sbefort please create a reproduction example or using glitch

[sbefort]

Here is a glitch:
https://sturdy-wave.glitch.me/

https://glitch.com/edit/#!/sturdy-wave

[dohomi]

I have a similar issue at the moment using the apollo-module. As I want the animation/loading spinner to wait till my graph-ql query is finished I would like to throttle the animation. Is there any way doing this?

[alexchopin]

Will be fixed in the next release. I'm closing it, but feel free to comment it in the future.

[javialon26]

@alexchopin same here with window.$nuxt.$root.$loading.start() or this.$root.$loading.start(). Will it be fixed in version 1? thank you!!!!

[unlockr-ca]

I also have the problem in the "mounted"

[ruslankonev]

worked with nextTick

this.$nextTick(() => {
  this.$root.$loading.start()
  this.$store.dispatch('orders/fetchOrders').then(() => {
    this.$root.$loading.finish()
  })
})

[jkd77]

I've noted that the code in https://glitch.com/edit/#!/sturdy-wave is still giving the "this.$root.$loading.start is not a function" error. Was this resolved? It still seems to be throwing the same error for Nuxt Edge 2.0.0-25523369.7c85202.

nextTick doesn't seem to work for me. I get two errors:
unknown action type: orders/fetchOrders
and
TypeError: Cannot read property 'then' of undefined

Help?

[jkd77]

Hey Team - has there been any movement on this issue? Would really appreciate getting an update on current status.

[manniL]

@jkd77 Use this.$nuxt.$loading (docs: https://nuxtjs.org/api/configuration-loading#the-loading-property). If you still have issues, please create a new one.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.