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.
razor 
@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.
razor 
@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#

razor 
<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.
razor 
<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();
    }
}
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community
Loading...