Top-level await

Using {#await query()} directly in template

Pattern Usage:

{#await getDelayedTime({ delay: 1500 })}
  <p>Loading...</p>
{:then data}
  <p>Time: {data.timestamp}</p>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

Live Demo:

Loading data (1.5s delay)...

How it works: The {#await} block automatically handles the promise returned by the query function. It shows loading state while waiting, then displays data when resolved, or error if rejected. This pattern is simple but reloads on every page navigation.