Loader
Quick start
You can use the Loader component to show a loading indicator while waiting for data to load and display a message when an error occurs.
Global templates configuration
You can configure the global templates for the loader component using the BdkLoaderOptions class.
The following example shows how to configure the global templates for the loader component.
BdkLoaderOptions.Loading.ChangeContent<LoadingContent>();<div class="d-flex flex-column align-items-center justify-content-center">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="mt-3">@(string.IsNullOrEmpty(Message) ? "Loading..." : Message)</div>
</div>
@code
{
[Parameter] public string Message { get; set; } = string.Empty;
}The component created to be used as LoadingContent needs to have a parameter called Message of type string.
You can register a RenderFragment string or MarkupString in place of the component type, noting that only MarkupString does not support receiving the Message defined in the BdkLoader component.
Similarly, the registration of the component type to be used in error cases needs to have a parameter called ErrorResult of type BdkLoaderErrorResult, which can be used to access the exception that occurred and check if the retry button will be displayed. Below is an example of the registration and usage of this component:
BdkLoaderOptions.Error.RegisterContent<Exception, ErrorContentExample>();
You can register an ErrorContent for a specific exception type.
<div class="d-flex flex-column align-items-center justify-content-center">
<div class="mt-3 text-danger">
@ErrorResult.Exception.Message
</div>
@if (ErrorResult.Loader.CanRetry)
{
<div class="mt-3">
<button class="btn btn-primary" @onclick="ErrorResult.Loader.ReloadAsync">@ErrorResult.Loader.CanRetryTitle</button>
</div>
}
</div>
@code
{
[Parameter] public required BdkLoaderErrorResult ErrorResult { get; set; }
}Basic
- dae5522d-ac49-4d59-a661-de69e9197c29 - 12/22/2024 23:37:12 +00:00
- 4f20053a-75d6-41d2-9fde-772961557949 - 12/22/2024 23:37:12 +00:00
- 1b995780-4958-44e5-a779-586edb29090f - 12/22/2024 23:37:12 +00:00
- 421afe0c-caeb-4b65-aae8-8d52d8275489 - 12/22/2024 23:37:12 +00:00
- 680f1260-f630-4f61-b2e5-7c8f9dff007e - 12/22/2024 23:37:12 +00:00
@inject ISubjectService Service
<BdkLoader Load="Service.ListAsync">
<ul>
@foreach (var item in context)
{
<li>@item.Id - @item.CreatedOn</li>
}
</ul>
</BdkLoader>Basic: no result
Attention: the BdkLoader context will be null, this mode can be used when a return value is not necessary.
Content displayed after loading
@inject ISubjectService Service
<BdkLoader T="object?" Load="LoadAsync">
<p>
Content displayed after loading
</p>
</BdkLoader>
@code
{
private async Task<object?> LoadAsync()
{
await Service.ProcessAsync();
return null;
}
}Basic with custom loading message
- 8a134b48-3288-4365-a916-57d6d6412dc3 - 12/22/2024 23:37:11 +00:00
- bf8d7bc7-f5ce-47f8-b73f-ae1badfb29eb - 12/22/2024 23:37:11 +00:00
- 61ccc5f1-0851-40dd-b9f5-060978bd483d - 12/22/2024 23:37:11 +00:00
- ff5e122e-143b-4ba6-b3f7-f03b887192e8 - 12/22/2024 23:37:11 +00:00
- 4b405592-6f80-4697-a8d9-2f926f15bda7 - 12/22/2024 23:37:11 +00:00
@inject ISubjectService Service
<BdkLoader Load="Service.ListAsync" Message="This is a custom message">
<ul>
@foreach (var item in context)
{
<li>@item.Id - @item.CreatedOn</li>
}
</ul>
</BdkLoader>
Basic with error
@inject ISubjectService Service
<BdkLoader Load="LoadAsync">
<ul>
@foreach (var item in context)
{
<li>@item.Id - @item.CreatedOn</li>
}
</ul>
</BdkLoader>
@code
{
private async Task<ResponseItem[]> LoadAsync()
{
await Service.ProcessAsync(throwErrorAfterProcess: true); // Simulate error
return await Service.ListAsync();
}
}Basic with error and CanRetry
@inject ISubjectService Service
<BdkLoader Load="LoadAsync" CanRetry CanRetryTitle="Retry">
<ul>
@foreach (var item in context)
{
<li>@item.Id - @item.CreatedOn</li>
}
</ul>
</BdkLoader>
@code
{
private async Task<ResponseItem[]> LoadAsync()
{
await Service.ProcessAsync(throwErrorAfterProcess: true); // Simulate error
return await Service.ListAsync();
}
}Basic with error, CanRetry and local custom ErrorContent
@inject ISubjectService Service
<BdkLoader Load="LoadAsync" CanRetry CanRetryTitle="Retry">
<ErrorContent Context="errorResult">
<div class="d-flex flex-column align-items-center justify-content-center">
<div class="mt-3 text-info">
@errorResult.Exception.Message
</div>
@if (errorResult.Loader.CanRetry)
{
<div class="mt-3">
<button class="btn btn-danger" @onclick="errorResult.Loader.ReloadAsync">@errorResult.Loader.CanRetryTitle</button>
</div>
}
</div>
</ErrorContent>
<ChildContent>
Content here
</ChildContent>
</BdkLoader>
@code
{
private async Task<ResponseItem[]> LoadAsync()
{
await Service.ProcessAsync(throwErrorAfterProcess: true); // Simulate error
return await Service.ListAsync();
}
}Basic with PreserveState
When the PreserveState mode is enabled, the BdkLoader will attempt to preserve the result of the Load function, avoiding going back to the server and causing an unwanted “Reload.”
- Item: 09afcb12-df38-4bd8-a5b7-15473b14ad9a
- Item: bc6a6bab-c3e0-4c2e-8d69-d7dd7590b717
- Item: 3d1cb7bb-edb3-47a9-a503-0950a409f446
- Item: 6ca4d201-4d4c-4c36-9159-f0680ce0de86
- Item: 41000654-2ce5-4530-95b0-cfd5e82d7537
@inject ISubjectService Service
<BdkLoader Load="Service.ListAsync" PreserveState >
<ul>
@foreach (var result in context)
{
<li>Item: @result.Id</li>
}
</ul>
</BdkLoader>Basic with PreserveState and not result
Content displayed after loading
@inject ISubjectService Service
<BdkLoader T="object?" Load="LoadAsync" PreserveState>
<p>
Content displayed after loading
</p>
</BdkLoader>
@code
{
private async Task<object?> LoadAsync()
{
await Service.ProcessAsync();
return null;
}
}