Wrap a region and, while it is busy, dim it, show a spinner and block clicks, so nobody works on stale data.
Why it helps
- Blocks the region
- Spinner on top
- Announces busy state
Where it fits
- Loading panels
- Saving
- Refreshing data
Example
<Stack Direction="StackDirection.Column" Spacing="2">
<Button OnClick="Load">Reload</Button>
<BusyOverlay Busy="_busy" Label="Loading orders">
<Card>
<Descriptions>
<DescriptionItem Label="Orders">@_count</DescriptionItem>
<DescriptionItem Label="Updated">@_updated</DescriptionItem>
</Descriptions>
</Card>
</BusyOverlay>
</Stack>
@code {
private bool _busy;
private int _count = 128;
private string _updated = "never";
private async Task Load()
{
_busy = true;
await Task.Delay(1800);
_count += 7;
_updated = DateTime.Now.ToString("T");
_busy = false;
}
}A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.
Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.