Blazor页面加载时Spinner未显示的问题求助

各位大佬好，我遇到个Blazor页面的小问题，想请教下大家：

我做了一个基于用户账户认证的Blazor应用，最近在账户管理区域加了个新页面——给原组件加上了@page "/Account/Manage/newarea"，改成了独立页面来适配现有账户区的结构。

这个新页面里我加了个加载spinner逻辑：默认loading布尔值设为true，当loading为真时显示spinner容器，加载完数据后把loading设为false，切换显示内容。核心代码大概是这样的：

@if (loading)
{
    <div class="d-flex-center h-fill">
        <div class="spinner-container">
            <div id="spinner" class="spinner"></div>
        </div>
    </div>
}
else
{
    <!-- 加载完成后显示的数据内容 -->
}

@code {
    private bool loading = true;

    protected override async Task OnInitializedAsync()
    {
        await InitializeData();
    }

    private async Task InitializeData()
    {
        // 调用API获取数据的逻辑，最后将loading设为false
        // ...
        loading = false;
    }
}

现在的问题是：调试时能看到OnInitializedAsync和InitializeData()都正常执行了，但页面加载全程完全看不到spinner。我怀疑是OnInitializedAsync阻塞了UI渲染——因为调试时一步步走代码，整个过程页面都没显示spinner，直接等数据加载完才显示内容。

后来我试着把初始化逻辑移到OnAfterRenderAsync里，这下spinner倒是出来了，但数据加载完成后，页面永远不会切换显示数据内容！就算我手动加了await InvokeAsync(StateHasChanged);也没用，完全没反应。

有没有大佬能指点下，我是不是漏掉了什么关键步骤？之前这个组件是嵌套在其他页面里的，改成独立页面后就出这问题了，实在搞不懂哪里错了😭

内容来源于stack exchange