Welcome 👋!

When you're building blazingly fast WASM apps, there's one thing that silently makes or breaks the user experience: loading states. We've all been there, blank screens, layout jumps, etc. It's not just bad UX. It's lost trust.

That's why we're excited today to introduce Skeleton RS , a highly-configurable skeleton loader built natively for Rust WASM frameworks, starting with full Yew support. Think of it as a smart placeholder for your content , one that speaks fluent WASM.

Let's unpack why Skeleton RS is your new best friend when it comes to loading UIs 🦴.

🦴 What Is Skeleton RS?

Skeleton RS is a high-performance skeleton loader component designed for frontend Rust frameworks like Yew. Whether you're fetching data, lazy-loading routes, or animating components into view, Skeleton RS gives you graceful, styled placeholders that blend into your design system easily.

No JavaScript hacks. No extra boilerplate. Just clean, declarative Rust 🦀.

Built-in UX Goodness

• Pulse & Wave animations for that polished glow.
• Auto-sizing to match real content dimensions.
• Visibility-based animation triggers via IntersectionObserver.
• Fine-grained control via props without sacrificing simplicity.

🚀 Why You'll Love Skeleton RS

You're not just faking a loading state. You're designing a seamless experience.

Skeleton RS isn't another "spinner in disguise". It's intentionally minimal, yet insanely flexible. Designed to look great out of the box, but gives you the controls when you need them.

Here's why it stands out:

• 🔍 Context-Aware: Animate only when visible , save cycles, look smoother.
• 🎯 Responsive: Works with any layout, from dashboards to mobile-first views.
• 🧱 Composable: Use it with or without children, nest it, theme it, customize it.
• 🪶 Lightweight: No JS, no noise , pure Rust + WebAssembly.

This isn't a loading hack , it's a design utility.

⚡ Quick Yew Setup

Using Skeleton RS in your Yew project is dead simple:

1. Add it to your dependencies

cargo add skeleton-rs --features=yew

2. Import the component

use yew::prelude::*;
use skeleton_rs::yew::Skeleton;
use skeleton_rs::Variant;

3. Drop it into your app

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

Boom. Beautifully animated, accessible skeleton loaders, ready to roll.

🧩 Features

This is UX design, not just developer convenience.

⚙️ Full Control with Props

Skeleton RS gives you all the toggles and knobs you need , without overengineering.

<Skeleton
    variant={Variant::Rect}
    width="300px"
    height="200px"
    border_radius="8px"
    animation={Animation::Wave}
    show={true}
    delay_ms={300}
    theme={Theme::Dark}
    responsive={true}
/>

Want more? Use infer_size with children, tweak margin, plug into visibility with node_ref, and even animate on hover, focus, or click.

Yes, it really is that powerful , and that simple.

Let's say you're loading user cards or a product grid. Here's how you'd add meaningful skeletons without breaking structure:

🧾 Text Loading Placeholder

<Skeleton variant={Variant::Text} width="80%" height="1.1em" />

🟦 Avatar Circle

<Skeleton variant={Variant::Circle} width="48px" height="48px" />

📦 Card Block

<Skeleton
    variant={Variant::Rect}
    width="100%"
    height="150px"
    animation={Animation::Pulse}
    border_radius="12px"
/>

🔁 With Child Content (Infer Size)

<Skeleton infer_size={true}>
    <div class="user-profile">{"@rustacean"}</div>
</Skeleton>

🕵️ Animate Only When Visible

<Skeleton animate_on_visible={true} />

All this, and no layout shifts. Just butter-smooth transitions that feel native.

💡 Final Thoughts

Modern apps need modern loading states , not just a spinning icon and a prayer. Whether you're building admin dashboards, real-time UIs, or portfolio sites with WASM, Skeleton RS gives you the power to design with empathy.

It's not flashy. It's functional elegance , designed for today's Rust-native frontend.

opensass / skeleton-rs

🦴 A skeleton component for WASM frameworks.

🦴 Skeleton RS

🎬 Demo

Framework	Live Demo
Yew
Dioxus
Leptos	TODO

📜 Intro

Skeleton RS is a lightweight, highly customizable loading placeholder component for WASM-based UI frameworks like Yew, Dioxus, and Leptos. It helps deliver a smooth loading experience with animated placeholders, responsive sizing, and fine-grained visibility control using IntersectionObserver.

🤔 Why Use Skeleton RS?

The following features make Skeleton RS an essential building block for modern frontend apps built with Rust and WebAssembly:

1. ✨ Smooth UX: Mimics content structure while loading, avoiding layout shifts.
2. 👁️ Animate on Visibility: Supports visibility-based animations using IntersectionObserver.
3. 🎛️ Fully Customizable: Control height, width, border radius, animation style, and more.
4. 📱 Responsive Ready: Automatically adapts to screen sizes when enabled.
5. ⏳ Delay-Aware Rendering: Prevents unnecessary skeleton flashes using delay_ms.

Yew Usage

Refer to our guide to integrate this component into your…

View on GitHub

We are Open SASS, babe!.

We're working tirelessly on making Rust web development extremely easy for everyone.

If you made it this far, it would be nice if you could join us on Discord.

Till next time 👋!