javascript - SvelteKit - 後続の呼び出しでサーバーがレンダリングしたページに読み込みインジケーターを正しく表示する方法

Question

load 関数で API からデータをフェッチするページ (動的ルート) があります。データがフェッチされるまで読み込みインジケータを表示する正しい方法は何ですか? 私が試したこと：

1. 待機ブロックの使用。関数をフェッチする 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}

これは、ページがサーバー側でレンダリングされるときに機能すると思いますが、初めてうまく機能します。しかし、その後の呼び出しでは、プロミス解決ロジックが呼び出されず、プロミスを操作するロジックがない await ブロックで直接プロミスを受け取ります。

2. ロード関数から最終的に処理されたデータを受け取る変数をエクスポートし、HTML で、{if} ブロックを使用してこの変数が未定義になるまでロード インジケーターを表示しようとします。これは、変数が実際に未定義のときに初めて機能しますが、その後の呼び出しでは、この変数の値のみが変更され、未定義になることはありません。

let posts;

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