Components › States & feedback › Loading › Skeleton line

Skeleton line

canon

Shimmering placeholder line in three heights (sm, default, lg); the atom every loading layout is built from.

`.sk-sq`/`.sk-box`/`.sk-pill` were unused shape modifiers (SkLine never emitted them) and removed as dead code in acrm !4058 (28 Sep 2026).

Used in 6 files · 4 areas · 22× — components/assistant, components/mail, pages/AsistentPlochaPage, pages/datamart

@acrm/ui <SkLine>.sk .sk-line .sk-circleSource Story Legacy card Loading (skeleton).html

Examples Code Usage Accessibility Changelog

Default

components--skeleton-line--defaultOpen standalone ↗Code

packages/ui/stories/skeleton-line.stories.tsx

export const Default = () => <SkLine w={160} />;

Variants

fixed width — a placeholder for a value you know the length of

fluid width — fills the slot; use inside a grid cell or a flex row

varied widths — real text is ragged, so a column of identical bars reads as a table, not as text

components--skeleton-line--variantsOpen standalone ↗Code

packages/ui/stories/skeleton-line.stories.tsx

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)', width: 420 }}>
    <Labeled text="fixed width — a placeholder for a value you know the length of">
      <SkLine w={160} />
    </Labeled>
    <Labeled text="fluid width — fills the slot; use inside a grid cell or a flex row">
      <SkLine w="100%" />
    </Labeled>
    <Labeled text="varied widths — real text is ragged, so a column of identical bars reads as a table, not as text">
      <span style={{ display: 'grid', gap: 'var(--sp-2)' }}>
        <SkLine w={152} />
        <SkLine w={96} />
        <SkLine w={134} />
      </span>
    </Labeled>
  </div>
);

Sizes

sm — a meta line (time, count, secondary text)

default — a body line

lg — a heading or a record name

components--skeleton-line--sizesOpen standalone ↗Code

packages/ui/stories/skeleton-line.stories.tsx

export const Sizes = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)', width: 420 }}>
    <Labeled text="sm — a meta line (time, count, secondary text)">
      <SkLine w={120} sm />
    </Labeled>
    <Labeled text="default — a body line">
      <SkLine w={120} />
    </Labeled>
    <Labeled text="lg — a heading or a record name">
      <SkLine w={120} lg />
    </Labeled>
  </div>
);

States

loading — the only state; the shimmer runs until the data replaces the line

Jan Novák

loaded — the same slot with the real value, same height, no shift

components--skeleton-line--statesOpen standalone ↗Code

packages/ui/stories/skeleton-line.stories.tsx

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)', width: 420 }}>
    <Labeled text="loading — the only state; the shimmer runs until the data replaces the line">
      <SkLine w={200} />
    </Labeled>
    <Labeled text="loaded — the same slot with the real value, same height, no shift">
      <span style={{ font: 'var(--p)' }}>Jan Novák</span>
    </Labeled>
  </div>
);

Composition

components--skeleton-line--compositionOpen standalone ↗Code

packages/ui/stories/skeleton-line.stories.tsx

export const Composition = () => (
  <div
    style={{
      width: 420,
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      padding: 'var(--sp-4)',
      display: 'grid',
      gap: 'var(--sp-4)',
      background: 'var(--bg-canvas)',
    }}
  >
    <style>{AV_CSS}</style>
    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)' }}>
      <span className="sk sk-circle ds-av32" />
      <span style={{ display: 'grid', gap: 'var(--sp-2)' }}>
        <SkLine w={148} lg />
        <SkLine w={92} sm />
      </span>
    </div>
    <span style={{ display: 'grid', gap: 'var(--sp-2)' }}>
      <SkLine w="100%" />
      <SkLine w="100%" />
      <SkLine w="62%" />
    </span>
  </div>
);