Blazor .NET7数据加载时Spinner不显示问题求助

你的代码里有几个关键问题导致Spinner无法正常工作，下面是逐一修正的方案：

问题根源 #

1. 错误手动实例化组件：直接new MyCompanySpinner()绕过了Blazor的组件生命周期管理，@ref无法关联到框架真正创建的组件实例，调用Show/Hide自然无效。
2. 同步操作阻塞UI线程：for循环这类同步耗时操作会卡住Blazor的UI渲染线程，Spinner的状态更新根本没机会触发渲染。
3. 组件渲染时机不匹配：调用_spinner.Show()时，Spinner组件可能还没完成初始化，isInitialized为false，Show方法直接跳过。
4. Spinner内部逻辑冗余：OnInitializedAsync和OnAfterRenderAsync都调用Show，自动显示的逻辑和你手动控制的需求冲突。

1. 简化Spinner组件（改为手动控制版本） #

移除自动显示的逻辑，只保留外部手动调用Show/Hide的能力，同时保留延迟显示避免快速操作闪烁：

@code {
    [Parameter] public int DelayDuration { get; set; } = 200;
    private bool showSpinner = false;
    private bool isInitialized = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            isInitialized = true;
            await Task.CompletedTask;
        }
    }

    public async Task Show()
    {
        if (!isInitialized) return;
        
        await Task.Delay(DelayDuration);
        showSpinner = true;
        StateHasChanged(); 
    }

    public void Hide()
    {
        if (!isInitialized) return;
        
        showSpinner = false;
        StateHasChanged(); 
    }
}

@if (showSpinner)
{
    <div class="d-flex justify-content-center mt-5 mb-5">
        <i class="fa-solid fa-arrow-rotate-right fa-spin fa-xl pageSpinner" role="status" style="color: #4CAEA8;"></i>
        <span class="visually-hidden">Loading...</span>
    </div>
}

2. 修正父组件的实例管理和逻辑 #

Razor.cs代码修改 #

去掉手动new组件的操作，让Blazor通过@ref自动赋值，同时处理UI阻塞问题：

// 不要手动new，让@ref自动关联框架创建的实例
protected MyCompanySpinner? _spinner { get; set; }
protected bool _showContent = false;

protected async Task SetSomething()
{
    // 先切换到Spinner显示状态，触发父组件渲染
    _showContent = false;
    StateHasChanged();
    
    // 等待Spinner组件完成初始化（确保_spinner已赋值）
    await Task.Delay(10);
    
    // 调用Spinner显示
    if (_spinner != null)
    {
        await _spinner.Show();
    }

    try
    {
        // 把同步耗时操作放到后台线程，避免阻塞UI
        var somethingElse = await Task.Run(() => GetSomethingElse());
        
        // 更新ViewModel数据
        ViewModel.IBAN = "";
        ViewModel.IbanTenNameVan = "";
        ViewModel.SomethingElse = somethingElse;
        // ...其他数据操作
    }
    finally
    {
        // 无论成功失败都隐藏Spinner
        if (_spinner != null)
        {
            _spinner.Hide();
        }
        // 切换到内容显示状态
        _showContent = true;
        // 触发父组件渲染更新内容
        StateHasChanged();
    }
}

Razor页面修改 #

不要直接在页面里调用SetSomething()，应该绑定到事件（比如按钮点击）或者生命周期方法：

<!-- 示例：用按钮触发加载操作 -->
<button class="btn btn-primary" @onclick="SetSomething">加载数据</button>

@if (!_showContent)
{
    <MyCompanySpinner @ref="_spinner" DelayDuration="200" />
}
else
{
    <div class="row form-group">
        <div class="col-12">
            <MyCompanyData @ref="MyCompanyRef" SomeData="ViewModel.MyCompanyData" />
        </div>
    </div>
}

关键说明 #

• 绝对不要手动new组件：Blazor组件的实例必须由框架创建，否则无法参与渲染、生命周期等流程。
• 耗时操作必须异步化：同步耗时操作会卡死UI线程，所有状态更新都无法触发渲染，用Task.Run把同步代码移到后台线程。
• 手动触发状态更新：修改_showContent或者调用Spinner的方法后，必须调用StateHasChanged()通知Blazor重新渲染。
• 延迟显示Spinner：保留DelayDuration可以避免快速完成的操作导致Spinner一闪而过，提升用户体验。

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