Giters

nuxt / nuxt

The Intuitive Vue Framework.

Home Page:https://nuxt.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

loading animation (spaLoadingTemplate) disappears before request fully loaded

nonehub opened this issue · comments

commented

Environment

  • Operating System: Windows_NT
  • Node Version: v20.11.1
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: npm@10.5.2
  • Builder: -
  • User Config: ssr, devtools, nitro, vite, css, spaLoadingTemplate, app, modules, eslint, i18n
  • Runtime Modules: @nuxtjs/i18n@8.3.1, @pinia/nuxt@0.5.1, @nuxt/eslint@0.3.10, @hypernym/nuxt-anime@2.1.1
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-wpdjvn?file=pages%2Fshow.vue

Describe the bug

When i used:

definePageMeta({
  middleware : async () => {
    await $fetch("/posts"); // visible until the request is loaded
  }
});

The spaLoadingTemplate remains present until the request is completed

enter image description here

But when using:

const {data:posts} = await useAsyncData("posts",() => $fetch("/posts")) // The page opens and spaLoadingTemplate goes and the page is white until the request is completed..;

spaLoadingTemplate goes before the request completes...

How do I make spaLoadingTemplate remain present until the request finishes? Same case in middleware but using useAsyncData or something similar...

nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: false },
  nitro: {
    static: true,
  },
  spaLoadingTemplate: true,
});

You can try for example, So you can see what I mean:

Here is a white page :
https://stackblitz.com/edit/github-wpdjvn?file=pages%2Fnot_show.vue

Here it works :
https://stackblitz.com/edit/github-wpdjvn?file=pages%2Fshow.vue

Additional context

No response

Logs

No response

commented

Let's track in #21721