加载动画（spaLoadingTemplate）在请求完全加载之前消失 - nuxt3

Question

我使用时：

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

spaLoadingTemplate

一直存在，直到请求完成

但是使用时：

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

在请求完成之前发生...

如何使

spaLoadingTemplate

保持存在直到请求完成？

middleware

中的情况相同，但使用

useAsyncData

或类似的东西...

nuxt.config.ts

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

你可以尝试一下，这样你就明白我的意思了：

definePageMeta({
  middleware : async (to) => {
    await new Promise((resolve) => {
        setTimeout(async () => {
          resolve(true);
        }, 5000);
      });
  }
});

-----------------或者------------------------------------

const req = await useAsyncData(
  "posts",
  () =>
    new Promise((resolve) => {
      setTimeout(async () => {
        resolve(true);
      }, 5000);
    })
); 

Answer 1

使用您想要的任何名称创建一个

plugin

，并确保其末尾有

.client.ts

，例如

any.client.ts

我在

ssr:false

上尝试过，它有效，但我不知道什么时候在

ssr:true

上。该方法对我有用，我不知道使用该方法时是否存在任何具体问题或风险。我对一切不承担任何责任，你承担全部责任..

文件内：

export default defineNuxtPlugin((nuxt) => {
  const loadingHtml = toHtml(
    `
    <!-- html code here -->
    `);

  const loadingStyle = toHtml(
`<style>
  /* style code here */
 </style>
`, "head > *");

  nuxt.hook("page:loading:start", () => {
    document.body.appendChild(loadingHtml);
    document.head.append(loadingStyle);
  });

  nuxt.hook("page:loading:end", () => {
    loadingHtml.remove();
    loadingStyle.remove();
    console.log("done");
  });

  function toHtml(strHtml: string, selector: string = "body > *") {
    return new DOMParser()
      .parseFromString(strHtml, "text/html")
      .querySelector(selector) as HTMLElement;
  }
});

来源：

• 如何使用 JavaScript 将字符串转换为 HTML