How do you show a loading state with async Svelte? {#snippet pending()} {/snippet}

Wrap the content in with a pending snippet; for later updates use $effect.pending()

Use {#await} around every component

Async Svelte has no loading states

Svelte · Senior · Question 16 of 75

How do you show a loading state with async Svelte?

<svelte:boundary>
  <Profile />
  {#snippet pending()}
    <Spinner />
  {/snippet}
</svelte:boundary>

✓Correct answer: Wrap the content in <svelte:boundary> with a pending snippet; for later updates use $effect.pending()
2Use {#await} around every component
3Async Svelte has no loading states

Explanation

The pending snippet is shown only on the first load. Subsequent updates keep the old UI, and $effect.pending() reports how many promises are in flight.

How do you show a loading state with async Svelte?

Explanation

Further reading

Problem with a question

Test yourself