List States

Paginated List States

A list is not only its rows. Every paginated list in the app draws its empty, exhausted, truncated, failed and first-load states from these components.

Empty State

Shown in place of the rows. Pass text only when the reader can act on it.

No channels found
Try a different filter.

      <.list_empty_state title="No channels found" text="Try a different filter."
      icon={:channels} />
    
End Marker

Closes a paginated list. Drawn rather than written, so the same ornament serves every locale — the spoken equivalent is the announcer. `start` says this is all there is; `more` says there is more you cannot reach.

<.list_end_marker variant={:start} />
Load More

The keyboard path to pagination. Kept alongside scroll loading, never instead of it.


      <.list_load_more_button target={@myself} loading={@loading} />
    
Count Strip

Discloses truncation. Renders nothing when the whole list is on screen, so it reads as a warning rather than furniture.

Showing 100 of 5000


      <.list_count_strip shown={100} total={@page.total} />
    
Error & Retry

The one list state announced assertively — a failed page must not be scrolled past unnoticed.


      <.list_error_retry on_retry="reload_bans" target={@myself} />
    
First-load Skeleton

Reserves the space the rows will occupy, so the panel does not jump when they land.

<.list_skeleton rows={5} />
Announcer

A visually hidden live region that reports what arrived — not merely that loading happened. Nothing to see here by design.

(screen-reader only)

20 items loaded

<.list_announcer message={@announcement} />
Help
Help Topics GitHub License (MIT)
6 objects
Help Topics
GitHub License (MIT)