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:
<.skeleton type="text-line" variant="header" />
.pet-card .skeleton[data-type="image"] {
--skeleton-image-aspect-ratio: 1 / 1;
}
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>