在加载页面之前显示页面加载栏进度

Question

最近在Blazor中，我发现将ServerPrerendered的RenderMode与调用OnInitializedAsync中的初始数据结合使用会导致OnInitializedAsync被调用两次。这会导致短暂的UI闪烁，如果我不是从缓存中直接从数据库中提取数据，则会进行额外的数据库调用，而不是bueno。所以我切换到使用OnAfterRenderAsync，并且只在firstRender为true时调用。这可以处理额外的通话，而且没有UI闪光灯，感觉更好。然而，有一个短暂的时刻，并不是整个页面都已呈现，我正在等待它的加载。我想实现的是在页面顶部设置一个加载栏，以指示加载进度，类似于YouTube。

我想知道，从点击超级链接到呈现页面的那一刻起，我需要使用哪些生命周期事件来实现这一点？我还假设我需要使用Singleton AppState来跟踪基于某个当前值的加载进度，而不是总值，以生成条形图完成进度百分比。

我想我知道该怎么做，我开始尝试，但我想知道你们在Blazor还能想出什么其他解决方案？有什么建议吗？

Answer 1

我只使用OnInitializedAsync生命周期方法只要您使用如下异步方法调用数据：

protected override async Task OnInitializedAsync()
{
try
{
Employees = (await EmployeeDataService
.GetAllEmployees(JobCategory?.JobCategoryId))
.ToList();
if (JobCategory != null)
{
Title = $"{JobCategory.JobCategoryName} Employees";
}
}
catch (Exception e)
{
_loadFailed = true;
ExceptionMessage = e.Message;
}
}

然后在剃须刀中，我会进行各种检查，并在数据尚未加载的情况下显示适当的加载程序：

@if (Employees == null && _loadFailed == true)
{
<h1 class="text-danger">
The data failed to load please try again in a little while..
</h1>
<h6>@ExceptionMessage</h6>
}
else if (Employees== null)
{
<div style="display:normal;margin:auto" class="loader"></div>
}
else if (Employees.Count==0)
{
<p>No employees match the criteria with a job category of 
@JobCategory.JobCategoryName.</p>
}
else...

加载程序的CSS需要存在于站点中。CSS：

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}