Blazor Preload
Indicate the loading state of a page with Blazor Bootstrap preload component.
Things to know when using the 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.
![Blazor Bootstrap: Blazor Preload Component - Default](https://i.imgur.com/2cPuqFa.png)
Parameters
Name | Type | Default | Required | Description | Added Version |
---|---|---|---|---|---|
ChildContent | RenderFragment | null | ✔️ | Gets or sets the content to be rendered within the component. | 1.1.0 |
LoadingText | string? | null | Gets or sets the loading text. | 1.10.4 |
Preload Service
Methods
Name | Return Type | Description | Added Version |
---|---|---|---|
Show(SpinnerColor spinnerColor = SpinnerColor.Light) | void | Shows the preload. | 1.1.0 |
Show(SpinnerColor spinnerColor = SpinnerColor.Light, string? loadingText = null) | void | Shows the preload. | 1.10.4 |
Hide() | void | Hides the preload. | 1.1.0 |
Global preload service for the application
- Add the
Preload
component in MainLayout.razor page as shown below.
@using BlazorBootstrap
.
.
... MainLayout.razor code goes here ...
.
.
<Preload LoadingText="Loading..." />
- Inject
PreloadService
, then call theShow()
andHide()
methods before and after the Service/API call, respectively, as shown below.
@code {
[Inject] protected PreloadService PreloadService { get; set; }
private void GetEmployees()
{
try
{
PreloadService.Show();
// call the service/api to get the employees
}
catch
{
// handle exception
}
finally
{
PreloadService.Hide();
}
}
}
Change loading text
![Blazor Bootstrap: Blazor Preload Component - Change loading text](https://i.imgur.com/nzNRyp7.png)
<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; }
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.
![Blazor Bootstrap: Blazor Preload Component - Change spinner color](https://i.imgur.com/5PVt5bX.png)
<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; }
private async Task ShowSpinnerAsync(SpinnerColor spinnerColor)
{
PreloadService.Show(spinnerColor);
await Task.Delay(3000); // call the service/api
PreloadService.Hide();
}
}