Keep showing the spa-loading-template until page:finish

[ploca14]

Describe the feature

It would be nice to show the spa loading template until the 'page:finish' event.

When using Nuxt with SSR turned off and using the spa-loading-template to show a loading screen, the loading screen disappears once the app mounts but the app isn't rendered yet. I believe because nuxt lazy loads the components that need to be rendered. This leads to a blank page once the app mounts and until the components are loaded.

Other than that I love the new SPA loading template feature!

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[heartz66]

Additionally, setting spaLoadingTemplate to false does not disable the loading indiciator for me.

[timb-103]

This would be a good addition!

[danielroe]

Could you give me a sandbox example of the flash you're describing? 🙏

[ucw]

Could you give me a sandbox example of the flash you're describing? 🙏

https://stackblitz.com/edit/github-nn6wp8?file=app%2Fspa-loading-template.html,app.vue

[ShantKevorkian]

@danielroe is the flashing issue fixed? I still encounter it in version 3.6.0 and 3.7.0 as @ucw provided the example

[umar13893]

Is this fixed? I am fetching data in components loading disappear and I see blank page for 2-4 seconds after animated Nuxt logo icon.

[Isa3v]

I hope we can get a more permanent fix soon.

I've come up with a quick workaround where I create an HTML element using the content from spaLoadingTemplate before nuxtApp kicks in. It gets removed automatically with a slight delay after the page:finish hook fires.

https://github.com/Isa3v/nuxt-spa-loading-template

[kanhaic]

Any update on this? the workaround has issues with content loaded partially before spaloadingtemplate is removed.

[manniL]

@danielroe do you think this could be a 4.x change as it is "somewhat" breaking? 🤔

[danielroe]

I think it depends a bit on how we resolve it. I'd love to do so in a non-breaking way... if possible...

[sohaha]

You can either make a request, manually remove the spa-loading-template, or have a fade-out animation.

[nonehub]

Is the problem resolved?

[nonehub]

What do you think this way?
https://stackoverflow.com/a/78472145/23524201

[Isa3v]

What do you think this way? https://stackoverflow.com/a/78472145/23524201

I have already provided a link to a more better code
#21721 (comment)

This workaround is still not the most elegant solution to this issue