Streaming with Promises

Shell loads instantly, content streams in progressively.

Shell rendered at: 2026-01-15T18:52:36.629Z

The shell (header, nav, this card) loads immediately. The metrics below stream in after 2s, the chart after 3s. Each {#await} block can show its own loading state.

Implementation

// +page.server.ts
export const load = () => ({
  shellTime: new Date().toISOString(),
  metrics: getSlowMetrics(), // Promise
  chartData: getSlowChart(), // Promise
})

// +page.svelte
{#await data.metrics}
  <MetricsSkeleton />
{:then metrics}
  <MetricCards {metrics} />
{/await}

Traffic Over Time