LiveConnected.Skeletons (LiveConnected v0.1.0)

Copy Markdown View Source

Optional, dependency-free skeleton function components.

Use these inside a loading/1 to match your eventual layout and avoid layout shift while the connected render is on its way. They render the same lc-skeleton markup styled by priv/static/live_connected.css, so the shimmer animation and prefers-reduced-motion handling come for free.

def loading(assigns) do
  ~H"<LiveConnected.Skeletons.table rows={5} cols={4} />"
end

All components are small and self-contained — keep or ignore them as you like.

Summary

Functions

card(assigns)

A card-shaped skeleton: a title bar, a few body lines, and an optional footer.

list(assigns)

A list-shaped skeleton: items rows, each an optional avatar plus two bars.

table(assigns)

A table-shaped skeleton with a header row and rows × cols cells.

Functions

card(assigns)

A card-shaped skeleton: a title bar, a few body lines, and an optional footer.

<LiveConnected.Skeletons.card lines={3} />

Attributes

  • lines (:integer) - number of body lines to render. Defaults to 3.
  • footer (:boolean) - render a short footer bar. Defaults to false.
  • class (:string) - extra classes on the wrapper. Defaults to nil.
  • Global attributes are accepted.

list(assigns)

A list-shaped skeleton: items rows, each an optional avatar plus two bars.

<LiveConnected.Skeletons.list items={6} avatar />

Attributes

  • items (:integer) - number of list items. Defaults to 6.
  • avatar (:boolean) - render a leading avatar circle. Defaults to false.
  • class (:string) - extra classes on the wrapper. Defaults to nil.
  • Global attributes are accepted.

table(assigns)

A table-shaped skeleton with a header row and rows × cols cells.

<LiveConnected.Skeletons.table rows={5} cols={4} />

Attributes

  • rows (:integer) - number of body rows. Defaults to 5.
  • cols (:integer) - number of columns per row. Defaults to 4.
  • class (:string) - extra classes on the wrapper. Defaults to nil.
  • Global attributes are accepted.