svelte - 在等待一段时间后显示加载程序的 slim 方法是什么？

Question

要在等待 Web 请求响应时显示加载微调器，我将在微调器组件中使用以下非常简单的 if 语句:

{#if waitingForAPIResponse}
    <Spinner></Spinner>
{/if}

在等待 200 毫秒后仅显示 Spinner 组件的好方法是什么？我直觉上想设置一个计时器，但我敢打赌有更好的 slim 方法。

Answer 1

最有活力的方法是在组合中添加另一个 promise 。

<script>
    const wait = () => new Promise((res) => setTimeout(res , 1000))
</script>

{#await APIRequest}
    {#await wait()}
        <span>Not going to take long</span>
    {:then a}
        <span>Taking a while</span>
  {/await}
{:then data}
    ...
{/await}

这里重要的是“内部等待”调用一个函数，这将在每次呈现时触发新 promise 的创建(例如，如果由于某种原因您重新触发 APIRequest)。
通过简单地将参数传递给 wait，这也可以扩展为灵活等待多长时间。 :

const wait = delay => new Promise((res) => setTimeout(res, delay))