Blazor wsam 应用有两个环节需要加上 Loading indicator, 一个是app 下载期的loading, 一个是页面初始化的loading, 默认项目模版对于这块都有处理, 但都非常简陋, 对于一个正式项目, 需要做进一步美化.
这里使用了 BlazorPro.Spinkit 组件, 主页 https://github.com/EdCharbeneau/BlazorPro.Spinkit
另一个好的方案是:
应用级 https://www.meziantou.net/customizing-the-blazor-webassembly-loading-screen.htm
页面级 https://www.meziantou.net/showing-a-loading-screen-while-initializing-a-blazor-application.htm
====================================
app loading 优化
====================================
默认项目模版生成 index.html , 处理 app loading 非常简单,
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
优化步骤:
1. 安装 BlazorPro.Spinkit 组件 dotnet add package BlazorPro.Spinkit
2. index.html 引入 spinkit.css
<link href="_content/BlazorPro.Spinkit/spinkit.min.css" rel="stylesheet" />
3. index.html 重写 app div
<!--<div id="app">Loading...</div>-->
<div id="app">
<div class="modal-overlay">
<div class="sk-wave">
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
</div>
</div>
</div>
4. 在 app.css 中增加 modal-overlay 样式
.modal-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
--sk-color: white;
}
效果图:
====================================
page loading 优化--简化版, 直接使用 spinner 组件
====================================
步骤:
1 _Import.razor 引入 @using BlazorPro.Spinkit
2. index.html 引入 spinkit.css
<link href="_content/BlazorPro.Spinkit/spinkit.min.css" rel="stylesheet" />
3. 在 page loading 条件下, 使用下面之一 spinner
@page "/"
if (IsLoading) {
<Pulse />
<Chase />
<Circle />
<CircleFade />
<Flow />
<Grid />
<Plane />
<Pulse />
<Swing />
<Wander />
<Wave />
<Bounce />
<Fold />
}
4. 以 FetchData.razor 为例, 做简单改造:
@if (forecasts == null)
{
<Pulse/>
}
else
{
@*其他代码省略*@
}
@code{
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
await Task.Delay(500); //模拟更大的延时
}
// 其他代码省略
}
效果图:
====================================
page loading 优化--完整版, 使用 SpinLoader 组件
====================================
步骤:
1 _Import.razor 引入 @using BlazorPro.Spinkit
2. index.html 引入 spinkit.css
<link href="_content/BlazorPro.Spinkit/spinkit.min.css" rel="stylesheet" />
3. 在 page 页面中, 使用 SpinLoader 组件封装那些较为耗时的html片段,
SpinnerLoader 组件包含三个子模版部分
<SpinLoader IsLoading="isLoading" IsFaulted="isFaulted">
<LoadingTemplate>
<!-- 加载期显示的内容 --->
</LoadingTemplate>
<ContentTemplate>
<!-- 正常显示的内容 --->
</ContentTemplate>
<FaultedContentTemplate>
<!-- 可选部分, 异常发生后显示的内容 --->
</FaultedContentTemplate>
</SpinLoader>
以 FetchData.razor 为例, 做简单改造:
<SpinLoader IsLoading="@(forecasts == null)" IsFaulted="@false">
<LoadingTemplate>
<Circle Color="#e67e22" Size="60px" Center="true" />
</LoadingTemplate>
<ContentTemplate>
@*省略展现table的内容*@
</ContentTemplate>
<FaultedTemplate>
</FaultedTemplate>
</SpinLoader>
效果: