Streaming with promises in Svelte - Step-by-Step Execution

Concept Flow - Streaming with promises

Start Component

↓

Initialize Promise

↓

Render Loading State

↓

Promise Resolves

↓

Update State with Data

↓

Re-render with Data

↓

Display Final Output

This flow shows how a Svelte component starts with a promise, shows loading, then updates and renders data when the promise resolves.

Execution Sample

Svelte

let dataPromise = fetch('/api/data').then(res => res.json());

let currentData = null;

$: dataPromise.then(data => currentData = data);

This code fetches data asynchronously and updates the component state when the promise resolves.

Execution Table

Step	Action	Promise State	currentData Value	Component Rendered Output
1	Component starts, dataPromise created	Pending	null	Loading...
2	Promise pending, no data yet	Pending	null	Loading...
3	Promise resolves with data {name: 'Alice'}	Fulfilled	null	Loading...
4	Update currentData with resolved data	Fulfilled	{name: 'Alice'}	Display: Alice
5	Component re-renders with currentData	Fulfilled	{name: 'Alice'}	Display: Alice

💡 Promise fulfilled and data displayed, no further updates.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
dataPromise	undefined	Pending Promise	Fulfilled Promise	Fulfilled Promise	Fulfilled Promise
currentData	null	null	null	{name: 'Alice'}	{name: 'Alice'}

Key Moments - 2 Insights

Why does the component show 'Loading...' even after the promise resolves?

Because the component only updates the displayed data after currentData changes at step 4, before that it shows the loading state as currentData is null (see execution_table rows 3 and 4).

How does Svelte know to re-render when the promise resolves?

The reactive statement ($:) watches the promise resolution and updates currentData, triggering re-render (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of currentData at Step 3?

A undefined

B {name: 'Alice'}

C null

D Pending Promise

💡 Hint

Check the 'currentData Value' column at Step 3 in the execution_table.

At which step does the component first display the fetched data?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look at the 'Component Rendered Output' column to see when 'Display: Alice' appears.

If currentData was initialized with an empty object instead of null, how would the initial render change?

A It would still show 'Loading...'

B It would immediately display data (empty object)

C It would cause an error

D It would show nothing

💡 Hint

Refer to variable_tracker for currentData initial values and execution_table for render outputs.

Concept Snapshot

Svelte streams data by using promises.
Initialize a promise (e.g., fetch).
Use reactive statements ($:) to update state when promise resolves.
Render loading state while promise is pending.
Update and re-render component when data arrives.
This creates smooth async data streaming in UI.

Full Transcript

This visual execution shows how a Svelte component handles streaming data with promises. The component starts by creating a promise that fetches data. Initially, the promise is pending, so the component shows a loading message. When the promise resolves with data, a reactive statement updates the component's state variable currentData. This triggers a re-render, and the component displays the fetched data. The variable tracker shows how dataPromise changes from pending to fulfilled, and currentData updates from null to the fetched object. Key moments clarify why loading shows before data and how Svelte reactivity triggers updates. The quiz tests understanding of state values at each step and how initial values affect rendering.