如何正确显示 sveltekit 中的加载状态？

Question

我想在 +layout.svelte 中显示一个旋转器，而 +page.js 正在获取数据。使用下面的代码，在所有 api 调用完成之前，导航不可用。加载后我看到console.log。

有什么问题吗？如何正确显示加载状态？

+布局.svelte

<script>


  import { navigating } from '$app/stores';

  console.log(navigating)
</script>


  <main>
   
      {#if $navigating}
        <Spinner />
      {:else}
        <slot />
      {/if}
  
  </main>

Answer 1

在我们的应用程序中，我们使用顶部的beforeNavigate和函数来显示加载状态。afterNavigate+layout.svelte

import { afterNavigate, beforeNavigate } from '$app/navigation';

let loading = false;

beforeNavigate(() => {
    loading = true;
});

afterNavigate(() => {
    loading = false;
});

该loading变量可以是 svelte/store，因此您可以随时使用它。