如何在Svelte页面加载时显示加载器？求非SvelteKit等价实现方案

纯Svelte没有内置类似SvelteKit navigating 的加载状态管理能力，需要我们手动通过自定义Store和业务逻辑来实现，以下是具体方案：

1. 创建加载状态的自定义Store #

首先创建一个全局可写Store来跟踪加载状态，方便在组件间共享状态：

// stores.js
import { writable } from 'svelte/store';

// 初始状态为未加载
export const isLoading = writable(false);

2. 在业务逻辑中更新加载状态 #

根据触发加载的场景（API请求、路由切换等），手动更新Store的状态：

场景1：API请求时的加载状态 #

在发起异步请求前后切换加载状态：

import { isLoading } from './stores.js';

async function fetchUserData() {
  // 开始加载
  isLoading.set(true);
  try {
    const res = await fetch('https://your-api-endpoint.com/users');
    const data = await res.json();
    // 处理返回的数据
  } catch (err) {
    console.error('请求失败:', err);
  } finally {
    // 无论成功失败，结束加载
    isLoading.set(false);
  }
}

场景2：路由切换时的加载状态 #

如果你使用svelte-spa-router这类SPA路由库，可以通过监听路由变化来管理加载状态：

import { route } from 'svelte-spa-router';
import { isLoading } from './stores.js';

// 监听路由切换事件
route.subscribe((newRoute) => {
  // 路由切换开始时标记为加载中
  isLoading.set(true);
  
  // 如果路由对应的组件需要加载数据，可以在组件的onMount钩子中完成后再将isLoading设为false
});

3. 实现全局加载器组件 #

创建一个加载器组件，根据Store的状态自动显示/隐藏：

<!-- Loader.svelte -->
<script>
  import { isLoading } from './stores.js';
</script>

{#if $isLoading}
  <div class="loader-wrapper">
    <div class="loader">加载中...</div>
  </div>
{/if}

<style>
  .loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .loader {
    font-size: 1.2rem;
    color: #333;
    /* 添加旋转动画增强视觉效果 */
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

4. 在根组件中引入加载器 #

将加载器组件放在根组件（如App.svelte）中，确保全局范围内都能触发显示：

<!-- App.svelte -->
<script>
  import Loader from './Loader.svelte';
  // 其他组件和路由逻辑
</script>

<Loader />
<!-- 页面主体内容 -->

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