Blazor .NET：执行后台耗时查询时加载Spinner不显示的问题

核心原因 #

你遇到的问题是因为设置IsLoading = true后，UI线程没有及时得到更新通知——Blazor的组件状态更新默认在异步方法的await点后自动触发，但如果数据库操作是同步阻塞的，或者状态变更的时机没被Blazor检测到，就会导致Spinner无法及时显示。

具体修复步骤 #

1. 修正条件渲染语法

Blazor的条件渲染需要使用@if指令，你原来的语法是错误的，正确写法：

@if (IsLoading)
{
    <div class="spinner"></div>
}
else
{
    <!-- 这里渲染你的查询结果 -->
}

2. 强制UI状态更新

在设置IsLoading = true后，手动调用StateHasChanged()方法，强制Blazor刷新UI，显示Spinner：

// 组件内先声明状态变量
private bool IsLoading { get; set; } = false;

async Task Filter() {
    IsLoading = true;
    // 强制UI立即更新，显示加载动画
    StateHasChanged();
    // 执行数据库查询
    await FetchFromDb();
    IsLoading = false;
}

3. 确保数据库操作是真正的异步

如果FetchFromDb方法用的是同步SQL操作（比如SqlCommand.ExecuteReader()而不是ExecuteReaderAsync()），会阻塞UI线程，导致Spinner无法显示。必须改成异步数据库操作，示例：

async Task FetchFromDb()
{
    using var conn = new SqlConnection("你的连接字符串");
    await conn.OpenAsync();
    using var cmd = new SqlCommand("你的查询语句", conn);
    // 使用异步方法执行查询
    using var reader = await cmd.ExecuteReaderAsync();
    while (await reader.ReadAsync())
    {
        // 处理数据
    }
}

4. 同步操作的临时兼容方案（不推荐长期使用）

如果暂时无法将数据库操作改为异步，可以用Task.Run把同步操作放到后台线程，避免阻塞UI：

async Task Filter() {
    IsLoading = true;
    StateHasChanged();
    // 将同步操作包装到后台线程
    await Task.Run(() => FetchFromDb());
    IsLoading = false;
}

内容的提问来源于stack exchange，提问作者Prabhjot Singh