如何在Blazor页面初始化时控制加载遮罩的显示与隐藏？

1. 容器页面OnInitializedAsync()的执行顺序 #

容器页面的OnInitializedAsync()会最先触发。Blazor组件树的初始化流程是自上而下的：先执行父组件的OnInitialized/OnInitializedAsync，再依次初始化每个子组件的对应生命周期方法。但需注意：父组件的异步初始化方法不会等待子组件的异步操作完成，所以父组件的OnInitializedAsync()可能在子组件的异步逻辑还在执行时就已经结束。

2. 遮罩控制的正确位置 #

禁止在同步OnInitialized()中操作 #

OnInitialized()是同步方法，无法处理异步等待逻辑，根本无法判断所有子组件的异步初始化是否完成。如果在这里隐藏遮罩，会导致遮罩提前消失，用户看到未加载完成的页面，同时bUnit测试也会误判页面已加载完成。

不建议仅在父组件OnInitializedAsync()末尾隐藏遮罩 #

如前所述，父组件的异步方法不会等待子组件的异步任务，此时子组件可能还在加载数据，页面并未完全就绪，遮罩提前消失会影响用户体验和测试准确性。

推荐两种可靠方案 #

方案一：子组件任务跟踪（精准控制）

通过让子组件暴露初始化任务，父组件统一等待所有子组件任务完成后再隐藏遮罩，耦合度低且精准：

• 父组件代码：

@page "/"
<div class="loading-overlay" style="@(IsLoading ? "display:block" : "display:none")">Loading...</div>
<ChildComponent @ref="_childComp1" />
<ChildComponent @ref="_childComp2" />

@code {
    private bool IsLoading = true;
    private ChildComponent _childComp1;
    private ChildComponent _childComp2;

    protected override async Task OnInitializedAsync()
    {
        // 等待所有子组件的初始化任务完成
        await Task.WhenAll(_childComp1.InitializationTask, _childComp2.InitializationTask);
        IsLoading = false;
        StateHasChanged();
    }
}

• 子组件代码：

@code {
    public Task InitializationTask { get; private set; }

    protected override async Task OnInitializedAsync()
    {
        InitializationTask = LoadDataAsync();
        await InitializationTask;
    }

    private async Task LoadDataAsync()
    {
        // 子组件的异步初始化逻辑，比如API请求
        await Task.Delay(1000);
    }
}

方案二：OnAfterRenderAsync结合首次渲染（简化场景）

如果无需精确跟踪每个子组件，可利用OnAfterRenderAsync的firstRender参数，在首次渲染完成后等待异步操作稳定：

@page "/"
<div class="loading-overlay" style="@(IsLoading ? "display:block" : "display:none")">Loading...</div>
<!-- 子组件 -->

@code {
    private bool IsLoading = true;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 可根据实际业务调整等待逻辑，确保所有异步操作完成
            await Task.Delay(100); 
            IsLoading = false;
            StateHasChanged();
        }
    }
}

3. bUnit测试适配 #

确保IsLoading仅在所有异步初始化（父+子组件）完成后才设为false，这样bUnit的WaitForState(() => !component.Instance.IsLoading)就能精准等待页面完全加载，避免测试不稳定。

内容的提问来源于stack exchange，提问作者David Thielen