ASP .NET Blazor 页面路由转换

Question

我对 Blazor 页面有些陌生，并且有 Angular 的背景，并且知道对于长时间加载的异步页面，我可以使用路由动画或骨架加载器。我在 Razor 页面上有骨架加载器，但我的问题更多来自于加载该页面时，它正在进行昂贵的 API 调用，所以我想显示一个进度条，因为现在从主页开始，您在导航中点击了路线栏，然后整整 5 秒没有任何反应，直到页面加载并且骨架加载器短暂显示。我正在使用内存缓存，所以下次它不会那么糟糕，但无论如何我一直在尝试谷歌如何更好地处理这个问题。有人能指出我正确的方向吗？

所以，你可以在这里看到黄色的点击是当我点击它时，然后最后在内容加载结束时，但在整个过程中主屏幕仍然显示，这是我想解决的主要问题

我什至尝试过这个，但在页面加载进度条之前它仍然会导致很长的暂停

    @if (loading == true)
{
    <div class="progress mt-3">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
    </div>
} else{
...content here...
}

@code {
    public Boolean loading = true;
protected override async Task OnInitializedAsync()
{
....
loading = false;
}

Answer 1

下页说明了如何无延迟地显示加载消息。

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="@_css">@_message</div>

@code{
    [CascadingParameter] private HttpContext? httpContext { get; set; }
    private bool _isInteractive => httpContext is null;
    private bool _isloaded;
    private string _css => _isloaded ? "alert alert-success m-2" : "alert alert-danger m-2";
    private string _message => _isloaded ? "Loaded" : "Loading";

    protected override async Task OnInitializedAsync()
    {
        // Will only do the dats get in interactive mode
        if (_isInteractive)
        {
            await Task.Delay(2000);

            _isloaded = true;
        }
    }
}