refactor(Task): redesign toggle loading mask (#7864)

Author: ArgoZhang

src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs

@@ -41,7 +41,7 @@ public partial class Table<TItem>
     /// <para lang="zh">获得/设置 是否正在查询数据</para>
     /// <para lang="en">Gets or sets Whether is querying data</para>
     /// </summary>
-    private bool IsLoading { get; set; }
+    private bool _isShowLoading;
 
     /// <summary>
     /// <para lang="zh">获得 渲染模式</para>
@@ -500,13 +500,13 @@ private async Task QueryAsync(bool shouldRender, int? pageIndex = null, bool tri
         }
         else
         {
-            await InternalToggleLoading(true);
             if (pageIndex.HasValue)
             {
                 PageIndex = pageIndex.Value;
             }
+            await ToggleLoading(true);
             await QueryData(triggerByPagination);
-            await InternalToggleLoading(false);
+            await ToggleLoading(false);
         }
 
         if (shouldRender)
@@ -528,24 +528,18 @@ private async Task QueryAsync(bool shouldRender, int? pageIndex = null, bool tri
     /// <param name="state"><para lang="zh">true 时显示，false 时隐藏</para><para lang="en">true to display, false to hide</para></param>
     public async ValueTask ToggleLoading(bool state)
     {
-        if (ShowLoading)
+        if (!ShowLoading)
         {
-            IsLoading = state;
-            await InvokeVoidAsync("load", Id, state ? "show" : "hide");
+            return;
         }
-    }
 
-    /// <summary>
-    /// <para lang="zh">显示/隐藏 Loading 遮罩</para>
-    /// <para lang="en">Show/Hide Loading Mask</para>
-    /// </summary>
-    /// <param name="state"><para lang="zh">true 时显示，false 时隐藏</para><para lang="en">true to display, false to hide</para></param>
-    protected async ValueTask InternalToggleLoading(bool state)
-    {
-        if (ShowLoading && !IsLoading)
+        if (_isShowLoading == state)
         {
-            await InvokeVoidAsync("load", Id, state ? "show" : "hide");
+            return;
         }
+
+        _isShowLoading = state;
+        await InvokeVoidAsync("toggleLoadMask", Id, state ? "show" : "hide");
     }
 
     /// <summary>

src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs

@@ -584,6 +584,7 @@ private bool GetColumnsListState(ColumnVisibleItem item)
     /// </summary>
     public async Task AddAsync()
     {
+        await ToggleLoading(true);
         if (DynamicContext != null)
         {
             // <para lang="zh">数据源为 DataTable 新建后重建行与列</para>
@@ -605,7 +606,6 @@ public async Task AddAsync()
         }
         else
         {
-            await ToggleLoading(true);
             await InternalOnAddAsync();
             EditModalTitleString = AddModalTitle;
             if (EditMode == EditMode.Popup)
@@ -628,8 +628,8 @@ public async Task AddAsync()
                 await ShowEditDrawer(ItemChangedType.Add);
             }
             await OnSelectedRowsChanged();
-            await ToggleLoading(false);
         }
+        await ToggleLoading(false);
     }
 
     private bool ShowEditForm { get; set; }

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -1428,7 +1428,6 @@ private async Task ReloadColumnOrdersFromBrowserAsync(List<ITableColumn> columns
 
     private async Task ProcessFirstRender()
     {
-        IsLoading = true;
 
         // 设置渲染完毕
         _firstRender = false;
@@ -1444,7 +1443,6 @@ private async Task ProcessFirstRender()
 
         // 恢复自动查询功能
         _autoQuery = true;
-        IsLoading = false;
     }
 
     /// <summary>
@@ -1734,7 +1732,11 @@ private async ValueTask<ItemsProviderResult<TItem>> LoadItems(ItemsProviderReque
     {
         StartIndex = _isFilterTrigger ? 0 : request.StartIndex;
         _pageItems = request.Count;
+
+        await ToggleLoading(true);
         await QueryData();
+        await ToggleLoading(false);
+
         return new ItemsProviderResult<TItem>(QueryItems, TotalCount);
     }
 

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -208,7 +208,7 @@ export function sort(id) {
     }
 }
 
-export function load(id, method) {
+export function toggleLoadMask(id, method) {
     const table = Data.get(id)
     if (table) {
         const loader = [...table.el.children].find(el => el.classList.contains('table-loader'));