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 gap-4"> <Skeleton class="h-12 w-12 rounded-full" /> <div class="space-y-2"> <Skeleton class="h-4 w-[250px]" /> <Skeleton class="h-4 w-[200px]" /> </div> </div> } }
Avatar
use leptos::prelude::*; use singlestage::*; #[component] pub fn SkeletonAvatarExample() -> impl IntoView { view! { <div class="flex w-fit items-center gap-4"> <Skeleton class="size-10 shrink-0 rounded-full" /> <div class="grid gap-2"> <Skeleton class="h-4 w-[150px]" /> <Skeleton class="h-4 w-[100px]" /> </div> </div> } }
Card
use leptos::prelude::*; use singlestage::*; #[component] pub fn SkeletonCardExample() -> impl IntoView { view! { <Card class="w-full max-w-xs"> <CardHeader> <Skeleton class="h-4 w-2/3" /> <Skeleton class="h-4 w-1/2" /> </CardHeader> <CardContent> <Skeleton class="aspect-video w-full" /> </CardContent> </Card> } }
Text
use leptos::prelude::*; use singlestage::*; #[component] pub fn SkeletonTextExample() -> impl IntoView { view! { <div class="flex w-full max-w-xs flex-col gap-2"> <Skeleton class="h-4 w-full" /> <Skeleton class="h-4 w-full" /> <Skeleton class="h-4 w-3/4" /> </div> } }
Form
use leptos::prelude::*; use singlestage::*; #[component] pub fn SkeletonFormExample() -> impl IntoView { view! { <div class="flex w-full max-w-xs flex-col gap-7"> <div class="flex flex-col gap-3"> <Skeleton class="h-4 w-20" /> <Skeleton class="h-8 w-full" /> </div> <div class="flex flex-col gap-3"> <Skeleton class="h-4 w-24" /> <Skeleton class="h-8 w-full" /> </div> <Skeleton class="h-8 w-24" /> </div> } }
Table
use leptos::prelude::*; use singlestage::*; #[component] pub fn SkeletonTableExample() -> impl IntoView { view! { <div class="flex w-full max-w-sm flex-col gap-2"> <For each=move || 0..5 key=|i| i.to_string() let(_)> <div class="flex gap-4"> <Skeleton class="h-4 flex-1" /> <Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-20" /> </div> </For> </div> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; use singlestage::Skeleton; #[component] pub fn SkeletonAnatomy() -> impl IntoView { view! { <Skeleton /> } }
API Reference
Skeleton
Creates a skeleton used to show a placeholder while content is loading.
Implements global attributes.