Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented RadzenAsyncLoader component for Blazor, providing asynchronous data loading #1502

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions Radzen.Blazor/RadzenAsyncLoader.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@typeparam TData

@if (IsLoading && LoadingTemplate != null)
{
@LoadingTemplate
}
else if (Result != null)
{
@Template(Result)
}
73 changes: 73 additions & 0 deletions Radzen.Blazor/RadzenAsyncLoader.razor.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
using System;
using System.Threading.Tasks;

namespace Radzen.Blazor
{
/// <summary>
/// A generic component for asynchronously loading data and rendering templates based on the loading state.
/// </summary>
public partial class RadzenAsyncLoader<TData> : ComponentBase
{
/// <summary>
/// The template to render when data is loaded.
/// </summary>
[Parameter]
public RenderFragment<TData> Template { get; set; }

/// <summary>
/// The template to render while data is loading.
/// </summary>
[Parameter]
public RenderFragment LoadingTemplate { get; set; }

/// <summary>
/// The asynchronous task that fetches the data.
/// </summary>
[Parameter]
public Task<TData> DataTask { get; set; }

/// <summary>
/// A callback action invoked when an error occurs during data loading.
/// </summary>
[Parameter]
public Action<Exception> OnError { get; set; }

/// <summary>
/// Indicates whether the component is in a loading state.
/// </summary>
private bool IsLoading { get; set; } = true;

/// <summary>
/// The loaded data result.
/// </summary>
private TData Result { get; set; }

/// <summary>
/// Initializes the component and asynchronously loads data.
/// </summary>
/// <returns>A <see cref="Task"/> representing the asynchronous operation.</returns>
protected override async Task OnInitializedAsync()
{
try
{
Result = await DataTask;
IsLoading = false;
}
catch (Exception ex)
{
IsLoading = false;
if (OnError != null)
{
OnError(ex);
}
}
finally
{
// Ensure UI updates after loading completes or encounters an error.
StateHasChanged();
}
}
}
}
21 changes: 21 additions & 0 deletions Radzen.DocFX/guides/components/asyncloader.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# AsyncLoader component
This article demonstrates how to use the AsyncLoader component.

# Loading data asynchronously
The AsyncLoader component enables loading data asynchronously in Blazor applications. It offers the flexibility to specify loading and loaded templates, handle errors during data retrieval, and update the UI accordingly.

```
<RadzenAsyncLoader TData="Server.Models.ApplicationUser" DataTask="@Security.GetUserById(context.Id)">
<LoadingTemplate>
<RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Primary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" Size="ProgressBarCircularSize.Small" />
</LoadingTemplate>
<Template Context="ctx">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
@foreach (var role in ctx.Roles)
{
<RadzenBadge Text="@role.Name" />
}
</RadzenStack>
</Template>
</RadzenAsyncLoader>
```