Skeleton

Replaces content with same shape placeholder that indicates a loading state.

use radix_yew_themes::Skeleton;
use yew::prelude::*;

#[function_component]
pub fn SkeletonExample() -> Html {
    html! {
        <Skeleton>{"Loading"}</Skeleton>
    }
}

API Reference

This component is based on the span element and supports common margin props.

Prop	Type	Default
`as_child`	`Option<Callback<SkeletonChildProps>>`	-
`loading`	`bool`	`true`
`width`	`Option<Responsive<String>>`	-
`min_width`	`Option<Responsive<String>>`	-
`max_width`	`Option<Responsive<String>>`	-
`height`	`Option<Responsive<String>>`	-
`min_height`	`Option<Responsive<String>>`	-
`max_height`	`Option<Responsive<String>>`	-

Examples

Size

Use the width and height props to manually control the size of the skeleton.

use radix_yew_themes::Skeleton;
use yew::prelude::*;

#[function_component]
pub fn SkeletonSizeExample() -> Html {
    html! {
        <Skeleton width="48px" height="48px" />
    }
}

With Children

Use the loading prop to control whether the skeleton or its children are displayed. Skeleton preserves the dimensions of children when they are hidden and disables interactive elements.

use radix_yew_themes::{Flex, Skeleton, SkeletonChildProps, Switch};
use yew::prelude::*;

#[function_component]
pub fn SkeletonWithChildrenExample() -> Html {
    html! {
        <Flex gap=4>
            <Skeleton
                loading=true

                as_child={Callback::from(|SkeletonChildProps {
                    aria_hidden,
                    class,
                    inert,
                    style,
                    tabindex,
                    ..
                }| html! {
                    <Switch
                        default_checked=true

                        class={class}
                        style={style}

                        attributes={[
                            ("aria-hidden", aria_hidden),
                            ("inert", inert),
                            ("tabindex", tabindex),
                        ]}
                    />
                })}>
            </Skeleton>

            <Skeleton
                loading=false

                as_child={Callback::from(|SkeletonChildProps {
                    aria_hidden,
                    class,
                    inert,
                    style,
                    tabindex,
                    ..
                }| html! {
                    <Switch
                        default_checked=true

                        class={class}
                        style={style}

                        attributes={[
                            ("aria-hidden", aria_hidden),
                            ("inert", inert),
                            ("tabindex", tabindex),
                        ]}
                    />
                })}>
            </Skeleton>
        </Flex>
    }
}

With Text

When using Skeleton with text, you'd usually wrap the text node itself rather than the parent element. This ensures that the text is replaced with a placeholder of the same size:

use radix_yew_themes::{Container, Flex, FlexDirection, Skeleton, Text};
use yew::prelude::*;

#[function_component]
pub fn SkeletonWithTextExample() -> Html {
    html! {
        <Container size=1>
            <Flex direction={FlexDirection::Column} gap=2>
                <Text>
                    <Skeleton>{"Lorem ipsum dolor sit amet."}</Skeleton>
                </Text>

                <Skeleton>
                    <Text>{"Lorem ipsum dolor sit amet."}</Text>
                </Skeleton>
            </Flex>
        </Container>
    }
}

The difference is especially noticeable when wrapping longer paragraphs:

use radix_yew_themes::{Container, Flex, FlexDirection, Skeleton, Text};
use yew::prelude::*;

#[function_component]
pub fn SkeletonWithTextParagraphExample() -> Html {
    html! {
        <Container size=1>
            <Flex direction={FlexDirection::Column} gap=2>
                <Text>
                    <Skeleton>
                        {"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                        felis tellus, efficitur id convallis a, viverra eget libero. Nam magna
                        erat, fringilla sed commodo sed, aliquet nec magna."}
                    </Skeleton>
                </Text>

                <Skeleton>
                    <Text>
                        {"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                        felis tellus, efficitur id convallis a, viverra eget libero. Nam magna
                        erat, fringilla sed commodo sed, aliquet nec magna."}
                    </Text>
                </Skeleton>
            </Flex>
        </Container>
    }
}