SvelteKit-如何在后续调用中在服务器呈现的页面中正确显示加载指示器 [英] SvelteKit- How to correctly show a loading indicator in a server rendered page on subsequent calls

问题描述

我有一个页面(动态路由)，我在其中从Load函数中的API获取数据。在获取数据之前，显示加载指示器的正确方式是什么？我尝试过的内容：

1. 使用等待块。我返回一个获取函数的承诺，然后在正常的脚本标记中，我导出一个承诺变量。然后，我在操作数据后手动解析此承诺。

<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}

第一次可以很好地工作，我猜，当页面呈现在服务器端时，它也可以工作。但在随后的调用中，我的承诺解析逻辑不会被调用，并且我直接在等待块中接收承诺，其中没有逻辑来处理它。

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

let posts;

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

推荐答案

所以我已经使用navigating存储解决了这个问题。我不知道这是不是正确的方式。但这对我来说似乎很好。

在页面由服务器呈现并将控件传递到客户端之后，在从一个页面导航到另一个页面时navigatingstore为真。(Read More)

所以在我的__layout.svelte中，我正在做

{#if $navigating} Loading... {:else} Content {/if}

这篇关于SvelteKit-如何在后续调用中在服务器呈现的页面中正确显示加载指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！