SvelteKit load函数加载状态显示方案及TypeScript错误解决

一、修复TypeScript错误 #

你的代码存在两个导致TypeScript报错的问题：

1. 返回类型声明错误：Promise<PageLoad>是错误的，PageLoad是函数本身的类型，不是返回值类型，正确的做法是把load变量标注为PageLoad类型。
2. 返回结构错误：SvelteKit的load函数无需嵌套props键，直接返回props对象即可。

修正后的代码：

import type { PageLoad } from "./$types.js";

export const load: PageLoad = async () => {
  function fetchData(): Promise<string> {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("Hello World");
      }, 5000);
    });
  }

  const title = await fetchData();

  // 直接返回props对象，无需嵌套props键
  return { title };
};

二、加载状态与load函数的选择 #

关于load函数的阻塞行为 #

load函数的设计逻辑是在页面渲染前获取必要数据，因此初始页面加载时，浏览器会等待load执行完成才停止加载（标签页停止转圈）并渲染页面——这是正常行为，因为页面依赖load返回的数据才能完整渲染。

两种解决方案 #

方案1：保留load函数（适合需要SSR/SEO的场景）

• 优化请求性能：尽量缩短fetchData的耗时，比如并行请求多个数据、优化后端接口性能。
• 全局加载提示：在+layout.svelte中利用SvelteKit的navigating store（来自$app/navigation）处理客户端导航时的加载状态，示例代码：

<!-- src/routes/+layout.svelte -->
<script>
  import { navigating } from "$app/navigation";
  import { page } from "$app/stores";
</script>

{#if $navigating || !$page.data}
  <div class="loading">加载中...</div>
{/if}

<slot />

注意：初始加载时，页面会在load完成后才渲染，因此这个提示主要作用于客户端导航场景，初始加载时浏览器仍会保持转圈状态直到load完成。

方案2：改用组件内异步请求（适合用户体验优先、无需SSR的场景）

如果不需要SSR或可以接受客户端渲染数据，可将数据请求移到组件的onMount钩子中，页面会先渲染加载状态，再异步获取数据：

<!-- 你的仪表板页面组件 -->
<script>
  import { onMount } from "svelte";

  let title: string | null = null;
  let isLoading = true;

  onMount(async () => {
    function fetchData(): Promise<string> {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve("Hello World");
        }, 5000);
      });
    }

    title = await fetchData();
    isLoading = false;
  });
</script>

{#if isLoading}
  <div>加载中，请稍候...</div>
{:else}
  <h1>{title}</h1>
{/if}

这种方式下，浏览器会立即停止加载（页面已渲染），用户能看到自定义加载提示，体验更好，但会失去SSR带来的SEO和首屏内容优势。

总结 #

• 若需要SSR/SEO，优先优化load函数的请求性能，配合全局加载提示处理客户端导航状态；
• 若用户体验优先且无需SSR，改用onMount在组件内异步获取数据，显示自定义加载状态。

内容的提问来源于stack exchange，提问作者Matteo B