超过页面加载时间阈值时的 SvelteKit 加载指示器

Question

我正在将 SvelteKit 用于主要是服务器端渲染页面的网站。SvelteKit 上的客户端导航工作精美且超级快捷。然而，有时，当在路由函数中调用后端服务器时load()，由于数据库长尾延迟，响应不是即时的，可能需要几秒钟的响应。

创建仅在加载时间不是即时（低于 200 毫秒）时才显示的加载指示器的最佳方法是什么？我知道通用导航模式，但我特别希望创建一个加载指示器，除非页面加载不是即时的，否则不会触发该指示器。

Answer 1

Sveltekit 有一个名为“navigating”的存储变量，它字面上指示客户端是否处于加载页面之间。来自Sveltekit 文档：

navigating是一个可读的存储。当导航开始时，它的值为{ from, to }，其中from和to都镜像页面存储值。完成后 navigating，其值恢复为null。

请注意，如果您的页面是预渲染的，则它应该是“即时”的，因此不会显示加载指示器。如果不是，则只要获取和/或呈现您的内容，此“导航”变量就不会为空。如果您愿意，您可以让“Spinner”组件不显示任何内容...直到 200 毫秒后（使用setTimout计时器）...这听起来像您确实想要的。

这是我过去使用过的包装器组件的示例实现（请原谅 tailwindcss 语法......我复制并粘贴了它）。您可以使用以下逻辑自定义此想法__layout.svelte或包装组件或整个“页面” {#if $navigating}：

<script>
// USE THIS:
import { navigating } from '$app/stores'
// Example spinner/loading component is visible (when $navigating != null):
import Spinner from '$lib/design/Spinner.svelte'
...
</script>

  <main class="py-4">
    <div class="pagePaddingMain flex-col">
      {#if title}
        <h1 class="text-4xl text-center text-cText pb-4 sm:text-5xl">{title}</h1>
      {/if}
      {#if $navigating} <!-- LOOK HERE -->
        <div class="m-8">
          <Spinner />
          <h1 class="ext-3xl text-center text-cText">Fetching {title}...</h1>
        </div>
      {:else}
        <slot />
      {/if}
    </div>
  </main>

就是这样。祝你好运！