Components › States & feedback › Loading › List loader

List loader

canon

The drumming hand shown while a long listing loads or pages in (AD P93); listings only, never buttons.

Size via --lh-scale (default 0.4 ≈ 45 × 28 px), punch-out ground via --lh-bg (default --surface-100).

Used in 14 files · 11 areas · 22× — components/communication, components/kpi, components/segment, components/timeline, pages/AktivitaPage, pages/HovoryStatistikaPage …

@acrm/ui <ListLoader>.acrm-loadhand .lh-hand .lh-finger .lh-item +4SourceStoryLegacy card Loading (skeleton).html
ExamplesCodeUsageAccessibilityChangelog

The hand drumming its fingers while a long listing loads or pages in. React packages/ui/src/components/ListLoader.tsx, primitive .acrm-loadhand in apps/web/src/ds.css, which owns the whole drawing and its rhythm.

Listings only (AD P93). It is not a general "something is happening" sign: buttons, saving and short actions take loader.

When to use

  • The footer of a listing that is fetching the next page.
  • Lazy loading as the user scrolls (the listing loads by 50, with no sticky bar at the bottom).
  • A listing still waiting for its first batch, where a skeleton would be guessing at a shape nobody knows yet.

When not to use

  • Buttons, dialogs, saving, deleting — that is loader.
  • A first load whose row shape is known — that is skeleton-list, which holds the layout.
  • A failed page fetch — that is error-state.

Anatomy

  • span.acrm-loadhand[role="status"] with an aria-hidden hand: four .lh-finger (each .lh-item = .lh-joints + .lh-nail) and one .lh-thumb, plus .acrm-sr carrying the label.
  • Two knobs: --lh-scale (default 0.4 ≈ 45 × 28 px) and --lh-bg, the ground the knuckles and nails are punched out of (default --surface-100).
  • The drawing repaints many times a second, so the primitive sets contain: layout style size to keep the recalculation inside the hand.

Measured: 34 × 21 at 0.3, 45 × 28 at the default, 67 × 42 at 0.6.

Best practices

Do
  • Put it in the listing footer, replacing the "load more" control for the length of the fetch, and let the new rows appear under the ones the user has already read.
  • Re-point --lh-bg when the loader sits on anything other than --surface-100, or the punch-outs keep the page colour and the seams show.
  • Keep the default size unless the slot genuinely demands otherwise.
Don’t
  • Set --lh-scale or --lh-bg on a parent. Both are declared on .acrm-loadhand itself, so an ancestor value is overridden and the change silently does nothing — the rule has to target the element (.my-scope .acrm-loadhand { --lh-bg: … }).
  • Put it in a button or next to a save action.
  • Show it and the "load more" button at the same time.
  • Scale it past the point where the fingers stop reading as fingers.

Content

  • label (default Načítám…) is screen-reader text only. Make it say what is loading when the page has several listings.
  • loader — the short-wait loader, and the only other one.
  • skeleton-list — the first-load alternative when the row shape is known.
  • item-list, table — the listings this sits under.
  • Stories: components--list-loader--default, --variants, --sizes, --states, --composition.

Source: docs/loading/list-loader.usage.md · GitLab