Feedback

Skeleton

Loading placeholders that match the shape of the real content.

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

<Skeleton height="20px" width="60%" />
<Skeleton variant="circular" width={48} height={48} />
<Skeleton rows={3} />

Skeletons are aria-hidden. Announce the loading state on the container, for example with aria-busy="true", and leave the placeholders silent.

The `skeleton` prop

Avatar, KpiCard, TextField, Table, Card and GlassCard take skeleton. The component keeps its real DOM, so the placeholder has exactly the loaded size (no layout shift): content is laid out but hidden, the host paints the same shimmer as <Skeleton>, and it is announced with aria-busy="true". A skeleton TextField is disabled and an Avatar makes no image request. For Table, render placeholder rows so the height matches. Under prefers-reduced-motion the sweep stops and the placeholder is dimmed.

The sweep is a gradient band. Under the plain surface styles (defaultStyle: "flat", "solid" or "outlined", or data-style on <html>) no gradient is drawn: <Skeleton> and the skeleton prop pulse their opacity on a flat block instead. Glass, frosted, neumorphic, clay, chrome and tonal keep the sweep.

#099

Text lines

With rows, the last line is shortened to 60% for a natural paragraph.

Reference #099 · Pick in the gallery

Code

<script lang="ts">
  import { Skeleton, Card, Stack } from '@codeatlasdev/ui';
</script>

<Card material="glass" p="5" full>
  <Stack gap="3">
    <Skeleton height="20px" width="60%" />
    <Skeleton rows={3} height="14px" />
  </Stack>
</Card>

#097

Card layout

Reference #097 · Pick in the gallery

Code

<script lang="ts">
  import { Skeleton, Card, Stack, Flex } from '@codeatlasdev/ui';
</script>

<Card material="glass" p="5" full>
  <Flex gap="4" align="start">
    <Skeleton variant="circular" width="48px" height="48px" />
    <Stack gap="2">
      <Skeleton height="16px" width="40%" />
      <Skeleton height="13px" width="70%" />
      <Skeleton height="13px" width="55%" />
    </Stack>
  </Flex>
</Card>

#241

The skeleton prop

One flag on the real component keeps its size while data loads.

Revenue

R$ 12.400

↑+3.2%

We never share it

The card keeps the exact size it has once loaded, so nothing shifts when the data arrives.

Reference #241 · Pick in the gallery

Code

<script lang="ts">
  import { Avatar, Button, Card, Flex, KpiCard, Stack, TextField } from '@codeatlasdev/ui';

  let loading = $state(true);
</script>

<Stack gap="4">
  <Button variant="outlined" size="sm" onclick={() => (loading = !loading)}>
    {loading ? 'Show loaded' : 'Show loading'}
  </Button>
  <Flex gap="4" align="start" wrap>
    <Avatar alt="Ana Lima" size="xl" skeleton={loading} />
    <KpiCard title="Revenue" value="R$ 12.400" trend={3.2} skeleton={loading} />
  </Flex>
  <TextField label="Email" description="We never share it" skeleton={loading} />
  <Card title="Overview" skeleton={loading}>
    <p>The card keeps the exact size it has once loaded, so nothing shifts when the data arrives.</p>
  </Card>
</Stack>

#098

Image placeholder

Reference #098 · Pick in the gallery

Code

<script lang="ts">
  import { Skeleton, Card, Stack } from '@codeatlasdev/ui';
</script>

<Card material="glass" flush full>
  <Skeleton variant="rectangular" height="180px" />
  <div class="caption">
    <Stack gap="2">
      <Skeleton height="16px" width="50%" />
      <Skeleton height="13px" width="80%" />
    </Stack>
  </div>
</Card>

<style>
  .caption { padding: 16px; }
</style>

Props

Prop	Type	Default	Description
`variant`	`'text' \| 'circular' \| 'rectangular' \| 'rounded'`	`'text'`	Shape of the placeholder.
`width`	`string \| number`	–	CSS width. Numbers are treated as pixels.
`height`	`string \| number`	–	CSS height. Numbers are treated as pixels.
`rows`	`number`	`1`	Renders several stacked lines. For the text variant the last one is 60% wide.
`class`	`string`	`''`	Extra CSS classes.