Sveltejs Academy · Lesson

Deferred Loading and Suspense-Like UX

Show skeleton loaders while streamed data resolves for better perceived performance.

Skeleton UI

Show placeholder shapes while data loads. Users perceive the page as faster.

Render skeletons inside the pending block of {#await}.

{#await data.slow}
  <div class="skeleton" />
{:then result}
  <Card data={result} />
{/await}