MudBlazor Blazor WASM页面加载时弹窗加载指示器实现方法

步骤1：定义加载状态变量 #

在组件代码区添加用于控制加载弹窗显示的状态变量：

private bool _isLoading = false;

步骤2：优化API调用逻辑并控制加载状态 #

在OnInitializedAsync中切换加载状态，同时并行调用4个API来缩短总耗时（串行调用会累加每个接口的等待时间，并行可最大化利用网络资源）：

protected override async Task OnInitializedAsync()
{
    _isLoading = true;
    try
    {
        // 同时启动4个API请求
        var list1Task = _apiService.GetList1Async();
        var list2Task = _apiService.GetList2Async();
        var list3Task = _apiService.GetList3Async();
        var list4Task = _apiService.GetList4Async();

        // 等待所有请求完成
        await Task.WhenAll(list1Task, list2Task, list3Task, list4Task);

        // 将结果赋值到对应列表变量
        List1 = await list1Task;
        List2 = await list2Task;
        List3 = await list3Task;
        List4 = await list4Task;
    }
    catch (Exception ex)
    {
        // 异常处理：比如用MudBlazor的Snackbar显示错误提示
        _snackbar.Add($"加载失败: {ex.Message}", Severity.Error);
    }
    finally
    {
        // 无论成功/失败，都关闭加载状态
        _isLoading = false;
    }
}

步骤3：添加MudBlazor全屏加载弹窗UI #

在组件的Razor模板中，添加覆盖整个页面的加载弹窗，使用MudOverlay配合进度组件实现：

<!-- 全屏加载弹窗 -->
@if (_isLoading)
{
    <MudOverlay DarkBackground="true" Visible="true" Fixed="true" Opacity="0.6">
        <MudPaper Elevation="8" Class="pa-6 d-flex flex-column align-center justify-center">
            <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
            <MudText Class="mt-4" Typo="Typo.body1">加载中，请稍候...</MudText>
        </MudPaper>
    </MudOverlay>
}

<!-- 你的页面原有内容 -->
<MudCard Class="mt-4">
    <!-- 列表展示区域 -->
</MudCard>

可选：用MudDialog实现独立加载弹窗 #

如果需要更灵活的弹窗管理（比如复用弹窗组件），可以使用MudDialog：

1. 注入IDialogService并定义弹窗引用：

[Inject] private IDialogService _dialogService { get; set; }
private IDialogReference _loadingDialogRef;

2. 修改OnInitializedAsync控制弹窗：

protected override async Task OnInitializedAsync()
{
    // 打开无标题的加载弹窗
    _loadingDialogRef = _dialogService.Show<LoadingDialog>(string.Empty, new DialogParameters { { "NoHeader", true } });
    
    try
    {
        // 并行API调用逻辑同前
        var list1Task = _apiService.GetList1Async();
        var list2Task = _apiService.GetList2Async();
        var list3Task = _apiService.GetList3Async();
        var list4Task = _apiService.GetList4Async();

        await Task.WhenAll(list1Task, list2Task, list3Task, list4Task);

        List1 = await list1Task;
        List2 = await list2Task;
        List3 = await list3Task;
        List4 = await list4Task;
    }
    catch (Exception ex)
    {
        _snackbar.Add($"加载失败: {ex.Message}", Severity.Error);
    }
    finally
    {
        // 关闭弹窗
        await _loadingDialogRef.CloseAsync();
    }
}

3. 创建独立的LoadingDialog.razor组件：

<MudDialog>
    <DialogContent Class="d-flex flex-column align-center justify-center p-6">
        <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
        <MudText Class="mt-4" Typo="Typo.body1">加载中，请稍候...</MudText>
    </DialogContent>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
}

核心注意事项 #

• 并行调用API：用Task.WhenAll替代串行调用，可将总耗时从10秒压缩到单个接口的最长耗时
• 异常安全：在finally块中确保加载状态重置或弹窗关闭，避免出现永久加载的情况
• 体验优化：添加明确的加载提示文字，让用户感知到系统正在处理请求

内容的提问来源于stack exchange，提问作者Shakil Ahmed