Skeleton#

A skeleton is a placeholder element of a specific shape and size which can be displayed in place of some actual content, whenever, for example, this content cannot be displayed because required data is still being fetched from a network resource. This reduces layout shifts and prepares the user for where content will be visible when available.

An explicit width property of Size::Percent(100.0) can be omitting as this is the default width of any skeleton.
The height property defaults to Size::Auto, so setting an explicit height is always advised when not embedding children in the skeleton.

The skeleton will render as:

Animation#

By default, skeleton components contain an animation, suggesting that something is waiting to replace this component shortly. If for any reason, this animation is not desired, it can be disabled using the animated property.

The skeleton will render as:

Albeit used quite often these days, I would like to remind you that this concept is only tries to mitigate the problem of slowly loading resources. All that might just not be required, if resources are preloaded, if services providing data do that in a few milliseconds, and so on and so forth... Try avoiding overly aggressive use of the skeleton component.But, even if your services respond quickly, keep in mind that the (uncontrollable) user-network-speeds may still result in slow resources.

Children#

As already mentioned briefly, the skeleton component optionally accepts children, so that content con be rendered if desired. In this case, a specific height property may not be specified.

The skeleton will render as:

We will encounter these skeletons on other pages of this layout chapter.

Styling#

You may overwrite any of the following CSS variables to meet your styling needs.