<script lang="ts">
  // Renders an App's lazily-loaded component (AppDef.component is a
  // dynamic-import loader, not the component itself). Shows the shared
  // spinner while the chunk fetches; Vite's module cache makes repeat
  // opens resolve from cache on the next microtask, so the spinner is
  // one-tick at most after first load. Used by both WindowLayer
  // (windowed apps) and DockedLayer (docked apps) so the loading state
  // is uniform across app kinds.
  import type { Component } from 'svelte'
  import { untrack } from 'svelte'
  import Spinner from '../Spinner.svelte'

  let { load }: { load: () => Promise<{ default: Component }> } = $props()

  // Created once per mount, not per render. `load` is the app's stable
  // registry loader (app.component — defined once in the APPS array, never
  // reassigned), so reading it at init is correct; untrack tells Svelte the
  // one-shot read is intentional and silences the state_referenced_locally
  // lint. Without pinning, {#await} would re-subscribe to a fresh Promise on
  // every reactive re-evaluation of load() and loop.
  const promise = untrack(() => load())
</script>

{#await promise}
  <div class="flex h-full min-h-0 items-center justify-center text-muted-foreground">
    <Spinner class="size-5" />
  </div>
{:then mod}
  {@const C = mod.default}
  <C />
{:catch error}
  <div
    class="flex h-full min-h-0 items-center justify-center p-4 text-center text-sm text-destructive"
  >
    Failed to load app: {(error as Error).message}
  </div>
{/await}
