Struct Skeleton

pub struct Skeleton { /* private fields */ }

Available on crate feature yew only.

Skeleton Component

A flexible and customizable Skeleton component for Yew applications, ideal for rendering placeholder content during loading states. It provides support for animations, visibility-based rendering, and responsive behavior.

Properties

The component uses the SkeletonProps struct for its properties. Key properties include:

Features

• Viewport-aware Animation: When animate_on_visible is enabled, the component uses IntersectionObserver to trigger animation only when scrolled into view.

• Delay Support: Prevents immediate rendering using the delay_ms prop, useful for avoiding flash of skeletons for fast-loading content.

• Responsive Layout: With the responsive prop, skeletons scale naturally across screen sizes.

• State-controlled Rendering: You can explicitly show or hide the skeleton using the show prop or control visibility dynamically.

• Slot Support: You can pass children to be wrapped in the skeleton effect, especially useful for text or UI blocks.

Examples

Basic Usage

use yew::prelude::*;
use skeleton_rs::yew::{Skeleton, SkeletonGroup};
use skeleton_rs::{Animation, Theme, Variant};

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <Skeleton width="200px" height="1.5em" />
    }
}

Text Placeholder

use yew::prelude::*;
use skeleton_rs::yew::{Skeleton, SkeletonGroup};
use skeleton_rs::{Animation, Theme, Variant};

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <Skeleton variant={Variant::Text} width="100%" height="1.2em" />
    }
}

Responsive with Inferred Size

use yew::prelude::*;
use skeleton_rs::yew::{Skeleton, SkeletonGroup};
use skeleton_rs::{Animation, Theme, Variant};

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <Skeleton infer_size={true} responsive={true}>
            <p>{ "Loading text..." }</p>
        </Skeleton>
    }
}

Animate When Visible

use yew::prelude::*;
use skeleton_rs::yew::{Skeleton, SkeletonGroup};
use skeleton_rs::{Animation, Theme, Variant};

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <Skeleton
            variant={Variant::Text}
            animate_on_visible={true}
            height="2em"
            width="80%"
        />
    }
}

Behavior

• When animate_on_visible is enabled, animation starts only once the component enters the viewport.
• If show is set to false, the component initializes hidden and reveals itself based on internal or external logic.
• You can customize almost all styles using props.

Accessibility

• Skeletons typically represent non-interactive placeholders and do not interfere with screen readers.
• Consider pairing them with appropriate ARIA aria-busy, aria-hidden, or live regions on the parent container for accessibility.

Notes

• The component uses NodeRef internally to observe visibility changes.
• The children prop allows rendering actual elements inside the skeleton, which get masked by the animation.

See Also

• MDN IntersectionObserver

Trait Implementations

impl BaseComponent for Skeleton

where Self: 'static,

type Message = ()

The Component’s Message.

type Properties = SkeletonProps

The Component’s Properties.

fn create(ctx: &Context<Self>) -> Self

Creates a component.

fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool

Updates component’s internal state.

fn changed( &mut self, _ctx: &Context<Self>, _old_props: &Self::Properties, ) -> bool

React to changes of component properties.

fn view(&self, ctx: &Context<Self>) -> HtmlResult

Returns a component layout to be rendered.

fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool)

Notified after a layout is rendered.

fn destroy(&mut self, _ctx: &Context<Self>)

Notified before a component is destroyed.

fn prepare_state(&self) -> Option<String>

Prepares the server-side state.

impl Debug for Skeleton

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl FunctionProvider for Skeleton

type Properties = SkeletonProps

Properties for the Function Component.

fn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult

Render the component. This function returns the Html to be rendered for the component.