Doggo Storybook 0.9.0

Skeleton

Renders a skeleton loader, a placeholder for content that is in the process of loading.

Read more Read less

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>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
rest :global Any additional HTML attributes.
Required type * :string