BlazorUI Demo

Skeleton

Describe realistic loading layouts concisely, then reveal the actual content.

Single placeholder
View code
<BuiSkeleton Placeholder="@SkeletonPart.Text()" />
Composed layout
View code
<BuiSkeleton Loading="loading" Layout="layout">
    <BuiCard><BuiText Typo="Typo.H4">Loaded content</BuiText><BuiText>The placeholder is replaced without changing the outer composition.</BuiText></BuiCard>
</BuiSkeleton>
<BuiButton OnClick="ToggleLoading" Size="Size.Small">Toggle loading</BuiButton>

@code {
    private bool loading = true;
    private readonly IReadOnlyList<SkeletonSection> layout = [SkeletonSection.Heading(), SkeletonSection.Text(3), SkeletonSection.Cards([2, 2])];
    private void ToggleLoading() => loading = !loading;
}