It mimics the layout of the actual content, providing a better user experience during loading phases.

Usage

Render one of the primitive types in isolation:

<.skeleton type="text_line" />

Combine primitives for complex layouts:

<div class="card-skeleton" aria-busy="true">
  <.skeleton type="image" />
  <.skeleton type="text-line" />
  <.skeleton type="text-line" />
  <.skeleton type="text-line" />
  <.skeleton type="rectangle" />
</div>

To modify the primitives for your use cases, you can either configure additional modifiers or use CSS properties:

<Doggo.skeleton type="text-line" variant="header" />

<Doggo.skeleton type="image" style="--aspect-ratio: 75%;" />

Aria-busy attribute

When using skeleton loaders, apply aria-busy="true" to the container element that contains the skeleton layout. For standalone use, add the attribute directly to the individual skeleton loader.

Async result component

The easiest way to load data asynchronously and render a skeleton loader is to use LiveView’s async operations and Phoenix.Component.async_result/1.

Assuming you defined a card skeleton component as described above:

<.async_result :let={puppy} assign={@puppy}>
  <:loading><.card_skeleton /></:loading>
  <:failed :let={_reason}>There was an error loading the puppy.</:failed>
<!-- Card for loaded content -->

</.async_result>