Skeleton

@* The labels are known up front: only the values wait, each a line as tall as its text, so the
   card keeps its size when they arrive. *@
<Card Title="Order #1042" Grow MaxWidth="22.Rem">
    <DescriptionList Size="ControlSize.Sm">
        <DescriptionItem Term="Customer"><Skeleton Loaded="_order is not null" Width="8.Rem">@_order?.Customer</Skeleton></DescriptionItem>
        <DescriptionItem Term="Items"><Skeleton Loaded="_order is not null" Width="4.Rem">@_order?.Items</Skeleton></DescriptionItem>
        <DescriptionItem Term="Total"><Skeleton Loaded="_order is not null" Width="5.Rem">@_order?.Total</Skeleton></DescriptionItem>
    </DescriptionList>
    <CardFooter>
        <Button OnClick="LoadAsync" Variant="ButtonVariant.Outline" Accent="Accent.Neutral" Size="ControlSize.Sm" StartIcon="Lucide.RefreshCw">Reload</Button>
    </CardFooter>
</Card>

@code {
    private Order? _order;

    protected override Task OnAfterRenderAsync(bool firstRender) => firstRender ? LoadAsync() : Task.CompletedTask;

    private async Task LoadAsync()
    {
        _order = null;
        StateHasChanged();
        await Task.Delay(1500);
        _order = new("Grace Hopper", "3 items", "$128.00");
        StateHasChanged();
    }

    private sealed record Order(string Customer, string Items, string Total);
}