Skeleton
Use to show a placeholder while content is loading.
use leptos::prelude::*; use singlestage::*; #[component] pub fn SkeletonExample() -> impl IntoView { view! { <div class="flex items-center space-x-4"> <Skeleton class="h-12 w-12 rounded-full" /> <div class="space-y-2"> <Skeleton class="h-4 w-[250px] rounded-md" /> <Skeleton class="h-4 w-[200px] rounded-md" /> </div> </div> } }
Card
use leptos::prelude::*; use singlestage::*; #[component] pub fn SkeletonCardExample() -> impl IntoView { view! { <div class="flex flex-col space-y-3"> <Skeleton class="h-[125px] w-[250px] rounded-xl" /> <div class="space-y-2"> <Skeleton class="h-4 w-[250px] rounded-md" /> <Skeleton class="h-4 w-[200px] rounded-md" /> </div> </div> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; use singlestage::Skeleton; #[component] pub fn SkeletonAnatomy() -> impl IntoView { view! { <Skeleton /> } }