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.

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

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 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();
        }
    }
}

See Preload demo here.

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; }

    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();
    }
}

See Preload demo here.

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; }

    private async Task ShowSpinnerAsync(SpinnerColor spinnerColor)
    {
        PreloadService.Show(spinnerColor);

        await Task.Delay(3000); // call the service/api

        PreloadService.Hide();
    }
}

See Preload demo here.