javascript - SvelteKit-如何在后续调用中正确显示服务器渲染页面中的加载指示器

Question

我有一个页面(动态路由)，我从加载函数中的 API 获取数据。在获取数据之前显示加载指示器的正确方法是什么。我尝试过的事情:

使用等待 block 。我返回一个获取函数的 promise ，然后在正常的脚本标签中，我导出一个 promise 变量。然后我在处理数据后手动解决这个 promise 。

<script context="module">
  export async function load({ fetch, page }) {   
    let collectionId = page.params.id;    
    let endpoint = url;   
    const promise = fetch(endpoint);  
    return {props:{promise}}; 
  }
</script>

然后在普通的脚本标签中

<script>
export let promise = new Promise(() => '');

promise = new Promise((resolve, reject) => {
    promise.then(function (response) {
      if(response.ok){
        console.log('response');
        response.json().then(function (json) {
          console.log('data in promise');
          console.log(json);
          let posts = json.map((post) => new Post(post));
          posts = posts.sort(function (a, b) {
            return a.id - b.id;
          });
          resolve(posts);
        });
      }else{
        response.text().then((text)=>reject(text));
      }
    });
});
</script>

然后在 HTML

{#await promise}
    <Shimmer items="3" />
{:then posts}
    <Cards data={posts} />
{:catch error}
    <Error message={error}/>
{/await}

这第一次工作正常，我猜，这在页面呈现服务器端时工作。但是在随后的调用中，我的 promise 解析逻辑不会被调用，并且我直接在 await block 中接收到 promise，没有逻辑来操作它。

我导出一个变量以从加载函数接收最终处理的数据，在 HTML 中，我尝试显示加载指示器，直到使用 {if} block 未定义该变量。这在变量实际上未定义时第一次起作用，但在随后的调用中，只有此变量的值会更改，但它永远不会未定义。

let posts;

{#if posts===undefined}
Loading...
{:else}
{posts}
{/if}

Answer 1

所以我通过使用 navigating 解决了这个问题。店铺。我不知道这是否是正确的方法。但这对我来说似乎很好。
在页面被服务器渲染并且控制传递到客户端之后，navigating从一页导航到另一页时，store 为 true。 (Read More)
所以在我的 __layout.svelte 中，我正在做{#if $navigating} Loading... {:else} Content {/if}