page AsyncData {
  layout = "public"

  load server summary {
    return { message: "Rendered by the server loader" }
  }

  load client profile {
    return { name: "Ada", role: "Administrator" }
  }

  view {
    <section class="stack">
      <h1>Async data boundaries</h1>

      <Async source="summary">
        <Loading><p>Preparing the server summary…</p></Loading>
        <Success data="summary"><p>{summary.message}</p></Success>
        <Error error="error"><p>{error.message}</p></Error>
      </Async>

      <Async source="profile" retries="2">
        <Loading><p>Loading the browser profile…</p></Loading>
        <Success data="profile"><p>Welcome {profile.name} — {profile.role}</p></Success>
        <Error error="error"><p>Profile failed: {error.message}</p></Error>
      </Async>
    </section>
  }
}