时间戳

首页 > 解决方案 > 初始连接时 Blazor 服务器端应用程序黑屏

blazor - 初始连接时 Blazor 服务器端应用程序黑屏

问题描述

我有一个 Blazor 服务器端应用程序，来自与服务器的 Internet 连接速度较慢的远程区域的用户可以查看该应用程序。在浏览器中输入 URL 后，它会显示几秒钟的空白屏幕，然后显示我的加载动画，然后加载内容。

加载动画是我在等待 API 调用返回数据时在页面上的内容。没什么特别的。但是，空白屏幕呢？那是当浏览器试图建立到服务器的 SignalR 连接时吗？

我对速度慢没问题，但是有没有办法在建立这个连接时也使用加载动画？空白屏幕根本不理想。

感谢您的任何建议。

标签： blazorblazor-server-side

解决方案

How about change the loading indicator to be visible from start and if you have a bool field it will be true initially. That way as soon as page is displayed you would see the loading screen and after the API data is fetched you can mark it as hidden.

Some example code for a razor below:

@if (IsLoading)
{
    <div class="loader">Loading...</div>
}


@code {
    public bool IsLoading { get; set; } = true;

    protected override async Task OnInitializedAsync()
    {
        await _apiClient.Get(...);
        IsLoading = false;
    }
}

推荐阅读