Blazor Preload
Indicate the loading state of a page with Blazor Bootstrap preload component.
Things to know when using the blazor preload component #
- Add the Preload component to your current page or your layout page.
- Inject
PreloadService. - Call
preloadService.Show()before you make any call to the API. - Call
preloadService.Hide()after you get the response from the API.
Global preload service for the application #
1. Add the
Preload component in MainLayout.razor page as shown below.@using BlazorBootstrap
.
.
... MainLayout.razor code goes here ...
.
.
<Preload LoadingText="Loading..." />2. Inject
PreloadService, then call the Show() and Hide() methods before and after the Service/API, respectively, as shown below.@code {
[Inject] protected PreloadService PreloadService { get; set; } = default!;
private void GetEmployees()
{
try
{
PreloadService.Show();
// call the service/api to get the employees
}
catch
{
// handle exception
}
finally
{
PreloadService.Hide();
}
}
}Change loading text #
<Button Color="ButtonColor.Primary" @onclick="ShowLoadingDataAsync">Show Loading data...</Button>
<Button Color="ButtonColor.Dark" @onclick="ShowSavingDataAsync">Show Saving data...</Button>
@code {
[Inject] protected PreloadService PreloadService { get; set; } = default!;
private async Task ShowLoadingDataAsync()
{
PreloadService.Show(SpinnerColor.Light, "Loading data...");
await Task.Delay(3000); // call the service/api
PreloadService.Hide();
}
private async Task ShowSavingDataAsync()
{
PreloadService.Show(SpinnerColor.Light, "Saving data...");
await Task.Delay(3000); // call the service/api
PreloadService.Hide();
}
}Change spinner color #
Change the default spinner color by passing the
SpinnerColor enum to the Show(...) method.
In the below example, we are using a global preload service, as shown in the above section.
<Button Color="ButtonColor.Primary" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Primary)">Primary Spinner</Button>
<Button Color="ButtonColor.Secondary" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Secondary)">Secondary Spinner</Button>
<Button Color="ButtonColor.Success" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Success)">Success Spinner</Button>
<Button Color="ButtonColor.Danger" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Danger)">Danger Spinner</Button>
<Button Color="ButtonColor.Warning" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Warning)">Warning Spinner</Button>
<Button Color="ButtonColor.Info" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Info)">Info Spinner</Button>
<Button Color="ButtonColor.Light" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Light)">Light Spinner</Button>
<Button Color="ButtonColor.Dark" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Dark)">Dark Spinner</Button>
@code {
[Inject] protected PreloadService PreloadService { get; set; } = default!;
private async Task ShowSpinnerAsync(SpinnerColor spinnerColor)
{
PreloadService.Show(spinnerColor);
await Task.Delay(3000); // call the service/api
PreloadService.Hide();
}
}