Blazor服务器端应用程序在最初连接时出现空白屏幕

Question

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

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

我可以接受慢速，但在建立连接的同时，有没有办法也使用加载动画？空白屏幕一点也不理想。

谢谢你的建议。

Answer 1

如何将加载指示器从一开始就更改为可见，如果您有一个bool字段，最初它将为true。这样，一旦页面显示，您就会看到加载屏幕，并且在获取API数据后，您可以将其标记为隐藏。

下面是剃刀的一些示例代码：

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

@code {
public bool IsLoading { get; set; } = true;
protected override async Task OnInitializedAsync()
{
await _apiClient.Get(...);
IsLoading = false;
}
}