ASP.NET Core Blazor 全局交互式 WebAssembly 无预渲染的加载指示器实现方案

在 ASP.NET Core Blazor 项目中，当使用全局交互式 WebAssembly 渲染模式且不启用预渲染时，开发者需要特别注意加载指示器的实现方式。本文将深入探讨几种有效的技术方案，帮助开发者实现流畅的用户体验。

核心挑战

在无预渲染的全局交互式 WebAssembly 应用中，传统的加载指示器实现方式可能无法完美工作。主要面临两个关键问题：

1. 指示器移除时机不当可能导致短暂的白屏现象
2. 组件生命周期与 WebAssembly 加载完成的时序需要精确控制

基础实现方案

静态 HTML 方案

最简单的实现方式是在页面中直接添加静态 HTML 加载指示器，并通过组件状态控制其显示：

@page "/"

<PageTitle>首页</PageTitle>

@if (loading)
{
    <div aria-busy="true" aria-describedby="progress-bar"></div>
    <progress id="progress-bar" aria-label="内容加载中..."></progress>
}
else
{
    <h1>欢迎使用</h1>
    <p>这是您的新应用。</p>
}

@code {
    private bool loading = true;

    protected override async Task OnInitializedAsync()
    {
        // 模拟耗时操作
        await Task.Delay(5000);
        
        loading = false;
    }
}

组件化方案

将加载指示器封装为可重用组件：

@if (Loading)
{
    <div aria-busy="true" aria-describedby="progress-bar"></div>
    <progress id="progress-bar" aria-label="内容加载中..."></progress>
}
else
{
    @ChildContent
}

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public bool Loading { get; set; }
}

使用时将页面内容包裹在组件中：

<ContentLoading Loading="@loading">
    <h1>欢迎使用</h1>
    <p>这是您的新应用。</p>
</ContentLoading>

高级优化方案

JavaScript 初始化器方案

通过 Blazor 的 JavaScript 初始化器机制，可以更精确地控制加载指示器的移除时机：

1. 在页面中添加静态加载指示器
2. 创建 JavaScript 初始化器文件
3. 实现 afterWebAssemblyStarted 回调来移除指示器

export function afterWebAssemblyStarted(options) {
    var progress = document.getElementById('progressBar');
    progress.remove();
}

组件生命周期结合 JavaScript 方案

为了消除指示器移除和页面渲染之间的短暂延迟，可以采用组件生命周期方法与 JavaScript 模块结合的方式：

1. 创建与组件同名的 JavaScript 文件（如 MainLayout.razor.js）
2. 在组件的 OnAfterRenderAsync 方法中调用 JavaScript 移除指示器

export function removeIndicator() {
    var progress = document.getElementById('progressBar');
    progress.remove();
}

组件实现：

@implements IAsyncDisposable
@inject IJSRuntime JS

@code {
    private IJSObjectReference? module;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import",
                "./Layout/MainLayout.razor.js");

            await module.InvokeVoidAsync("removeIndicator");
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            try
            {
                await module.DisposeAsync();
            }
            catch {}
        }
    }
}

最佳实践建议

1. 指示器位置：将加载指示器放在 MainLayout 或 Routes 组件中，确保全局生效
2. 无障碍支持：使用 aria-busy 和 aria-label 提升无障碍体验
3. 错误处理：添加适当的错误处理机制，防止 JavaScript 互操作失败
4. 资源清理：实现 IAsyncDisposable 确保 JavaScript 模块正确释放
5. 性能考量：对于复杂应用，考虑结合取消令牌处理长时间运行的操作

通过以上方案，开发者可以实现在全局交互式 WebAssembly 无预渲染场景下的流畅加载体验，消除页面闪烁和白屏现象，为用户提供更加专业的应用体验。