Feedback

SplashScreen

A brand screen for the app boot, with a minimum duration, skipped under reduced motion.

<script>
  import { SplashScreen } from "@codeatlasdev/ui";
</script>

<SplashScreen ready={session.loaded} minDuration={600}>
  {#snippet logo()}<Wordmark />{/snippet}
</SplashScreen>

A role="status" region named “Loading…”. It leaves once ready is true and it has shown for minDuration, so a fast boot never flashes it (LoadingBoundary does the same for content). Under prefers-reduced-motion: reduce it is skipped: nothing renders and ondone fires at once.

#844

Boot

At least 800 ms, then waits for the 1.2 s fake load.

Splash screens shown: 0

Reference #844 · Pick in the gallery

Code

<script lang="ts">
  import { Button, SplashScreen } from '@codeatlasdev/ui';

  let boot = $state(0);
  let ready = $state(false);
  let seen = $state(0);

  function start() {
    ready = false;
    boot++;
    setTimeout(() => (ready = true), 1200);
  }
</script>

<Button variant="outlined" size="sm" onclick={start}>Boot the app</Button>
<p class="note">Splash screens shown: {seen}</p>

{#key boot}
  {#if boot > 0}
    <SplashScreen {ready} minDuration={800} ondone={() => seen++}>
      {#snippet logo()}<strong class="mark">Acme</strong>{/snippet}
    </SplashScreen>
  {/if}
{/key}

<style>
  .note { margin: var(--ca-space-2) 0 0; color: var(--ca-text-secondary); font-size: var(--ca-font-size-caption); }
  .mark { font-family: var(--ca-font-display); font-size: var(--ca-font-size-h3); }
</style>

Props

Prop	Type	Default	Description
`logo`	`Snippet`	`undefined`	Brand mark in the middle.
`ready`	`boolean`	`true`	The app finished booting; the splash then waits out `minDuration`.
`minDuration`	`number`	`600`	Minimum ms on screen, from first show.
`label`	`string`	`'Loading…' (localized)`	Accessible name.
`ondone`	`() => void`	`undefined`	Called when it is gone or skipped.
`class`	`string`	`''`	Extra class names.