rainbow-fe/src/routes/post/[id].svelte

<script lang="ts" context="module">
  import type { Load } from '@sveltejs/kit';
  import {
    fetchStatus,
    fetchStatusContext,
    type MastodonStatus,
    type MastodonStatusContext
  } from '$lib/mastoapi/status';

  export const load: Load = async ({ session, params }) => {
    try {
      const status = await fetchStatus(session.instance, params.id);
      let contextPromise = await fetchStatusContext(session.instance, status);
      return { props: { status, contextPromise } };
    } catch (err) {
      return { status: 404, error: err as Error };
    }
  };
</script>

<script lang="ts">
  import Status from '$lib/components/Status.svelte';
  export let status: MastodonStatus;
  export let contextPromise: Promise<MastodonStatusContext>;
</script>

{#await contextPromise then context}
  <div class="ancestors">
    {#each context.ancestors as ancestor}
      <Status status={ancestor} />
    {/each}
  </div>
{/await}

{#if status != null}
  <Status {status} focused={true} />
{:else}
  <p>a</p>
{/if}

{#await contextPromise then context}
  <div class="descendants">
    {#each context.descendants as descendant}
      <Status status={descendant} />
    {/each}
  </div>
{/await}