Streaming with promises in Svelte - Mini Project: Build & Apply

Streaming with promises in Svelte

📖 Scenario: You are building a simple Svelte app that fetches a list of messages from a server. The server sends the messages one by one as a stream. You want to show each message as soon as it arrives, without waiting for the entire list.

🎯 Goal: Create a Svelte component that uses a promise to stream messages and display them live as they arrive.

📋 What You'll Learn

Create an array to hold messages

Create a promise that simulates streaming messages

Use await block to handle the promise and update the UI as messages arrive

Display each message inside a list in the component

💡 Why This Matters

🌍 Real World

Streaming data is common in chat apps, live notifications, or real-time dashboards where you want to show data as it arrives without waiting for everything.

💼 Career

Understanding how to handle promises and streams in frameworks like Svelte is important for building responsive, user-friendly web apps that handle asynchronous data efficiently.

1

Set up the messages array

Create a variable called messages and set it to an empty array [] inside the <script> tag.

Svelte

// Create a variable called messages and set it to []
// Your code here

Hint

Use let messages = []; to create an empty array for messages.

2

Create a streaming promise

Create a variable called streamPromise and assign it a new Promise that simulates streaming messages. Inside the promise, use setTimeout to add these messages to messages one by one every 500ms: 'Hello', 'from', 'Svelte'. Resolve the promise after all messages are added.

Svelte

let messages = [];

// Create streamPromise that adds messages with delays
// Your code here

Hint

Use a recursive function with setTimeout inside the promise to add messages one by one.

3

Use await block to show messages

Inside the <ul> tag, use a Svelte {#await} block with streamPromise. While waiting, show <li>Loading...</li>. When resolved, display each message in messages as <li> items using {#each} with message as the iterator variable.

Svelte

let messages = [];

let streamPromise = new Promise((resolve) => {
  const data = ['Hello', 'from', 'Svelte'];
  let index = 0;
  function sendNext() {
    if (index 


  {#await streamPromise}
    Loading...
  {:then}
    
    
  {/await}

Hint

Use {#await streamPromise} with {#each messages as message} inside the :then block to show messages.

4

Add accessibility and finalize

Add an aria-live="polite" attribute to the <ul> tag to announce new messages to screen readers. Also, add a role="list" attribute to the <ul> for better accessibility.

Svelte

let messages = [];

let streamPromise = new Promise((resolve) => {
  const data = ['Hello', 'from', 'Svelte'];
  let index = 0;
  function sendNext() {
    if (index 



  {#await streamPromise}
    Loading...
  {:then}
    {#each messages as message}
      {message}
    {/each}
  {/await}

Hint

Add aria-live="polite" and role="list" attributes to the <ul> tag for accessibility.