深入淺出Blazor webassembly之Loading優化

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>

效果:

posted @ 2021-09-23 22:47 harrychinese 閱讀(684) 評論(0) 收藏舉報

刷新頁面返回頂部

harrychinese

深入淺出Blazor webassembly之Loading優化

公告