Skip to main content

tablo_ui/components/primitives/
skeleton.rs

1// SYNC: topcoat-ui-registry@0.11.0 sha256:3b6d99ca9aef02697ce1142903bd49062ef9f2bd4ecbb1e6b82be0ea6554d1a5 — do not hand-edit. Sync via `cargo xtask sync-topcoat-ui` (ADR-0007).
2use topcoat::{
3    Result,
4    view::{Attributes, StaticClass, View, class, component, view},
5};
6
7/// Classes for a pulsing placeholder with a muted background.
8const SKELETON: StaticClass = class!("animate-pulse rounded-md bg-foreground/10");
9
10/// A pulsing placeholder for content that is loading.
11///
12/// Set its dimensions through classes in `attrs`. Match the expected content's shape to
13/// reduce layout movement when it arrives. Attributes are forwarded to the `<div>`,
14/// with extra classes added to its classes.
15///
16/// ```ignore
17/// view! {
18///     <div class="flex flex-col gap-2">
19///         skeleton(attrs: attributes! { class="h-4 w-32" })
20///         skeleton(attrs: attributes! { class="h-4 w-full" })
21///     </div>
22/// }
23/// ```
24#[component]
25pub async fn skeleton(#[default] mut attrs: Attributes) -> Result<impl View> {
26    Ok(view! { <div class=(class!(SKELETON, attrs.remove("class"))) (attrs)></div> })
27}