在blazor中显示加载动画

Question

当我使用另一个页面的链接导航到该页面时，我的OnInitialized((中有一个繁重的任务(获取数据(，它冻结到繁重的任务结束，如何在页面之间导航时显示常规加载动画。

Answer 1

最重要的是，要防止页面冻结，请使用OnInitializedSync方法而不是OnInitialized。

在组件页面的视图部分，您可以添加以下代码来查询您的数据(个人对象列表(是否仍然不可用：

@if (people == null)
{
<p>Loading people...</p>
}
else
{
<ul class="people-list">
@foreach (var person in people)
{
<li class="people-list-item">
<a href="@person.Id">
<PersonCard Person="person" />
</a>
</li>
}
</ul>
}

只要数据不可用，就会显示消息"正在加载人员…"。当数据可用时，将显示该数据，而不是上面的消息。您可以显示动画而不是消息，例如MatProgressBar。您甚至可以在加载动画时简单地放置img元素图像代替或添加到文本消息。。。

希望这能帮助。。。

Answer 2

如果你想显示/隐藏微调器或进度条写这样的Javascript函数，我们假设你使用NProgress(一个显示微调器和进度条的Javascript插件，这并不重要(：

window.progress = (action=> {
if (action === "start") NProgress.start();
else if (action === "stop") NProgress.done();
};

然后你可以启动和停止它：

JSRuntime.InvokeVoidAsync("progress", "start");
// do the heavy process
JSRuntime.InvokeVoidAsync("progress", "stop");

如果你想显示进度，你需要有一个SignalR Hub，那么你的JavaScript是这样的：

connection.on("ReceiveProgress", function (progress) {
if (progress <= 100) NProgress.set(progress / 100);
else NProgress.done();
});

在集线器中：

public async static Task SetProgress(int total, int index)
{
int progress = 0;
if (total != 0) progress = Convert.ToInt32(Math.Ceiling((double)(index * 100) / (double)total));
else progress = 0;
await _hubContext.Clients.User(State.User.Current.Id).SendAsync("ReceiveProgress", progress);
}

现在在你的Blazor代码中增加进度：

for(int i = 1 ; i<= total; i++)
{
// do the process step by step
await Noty.SetProgress(total, i); 
}