feat(module: button): add AutoLoading parameter (#4193)

components/button/Button.razor.cs

@@ -123,6 +123,12 @@ namespace AntDesign
         [Parameter]
         public bool Loading { get; set; }
 
+        /// <summary>
+        /// Whether to trigger and keep the loading state until the event callback is done.
+        /// </summary>
+        [Parameter]
+        public bool AutoLoading { get; set; }
+
         /// <summary>
         /// Callback when `Button` is clicked
         /// </summary>
@@ -199,7 +205,17 @@ namespace AntDesign
 
             if (OnClick.HasDelegate)
             {
-                await OnClick.InvokeAsync(args);
+                if (AutoLoading)
+                {
+                    Loading = true;
+                    StateHasChanged();
+                    await OnClick.InvokeAsync(args);
+                    Loading = false;
+                }
+                else
+                {
+                    _ = OnClick.InvokeAsync(args);
+                }
             }
         }
 

site/AntDesign.Docs/Demos/Components/Button/demo/Loading.razor

@@ -6,13 +6,13 @@
     <br />
     
     <Button Type="@ButtonType.Primary"
-            Loading="_noIconLoading"
+            AutoLoading
             OnClick="EnterNoIconLoading">
         Click me!
     </Button>
     <Button Type="@ButtonType.Primary"
             Icon="@IconType.Outline.Poweroff"
-            Loading="_withIconLoading"
+            AutoLoading
             OnClick="EnterWithIconLoading">
         Click me!
     </Button>
@@ -24,22 +24,16 @@
 
 @code
 {
-    private bool _noIconLoading;
-    private bool _withIconLoading;
     private bool _onlyIconLoading;
 
     private async Task EnterNoIconLoading()
     {
-        _noIconLoading = true;
         await Task.Delay(8000);
-        _noIconLoading = false;
     }
 
     private async Task EnterWithIconLoading()
     {
-        _withIconLoading = true;
         await Task.Delay(8000);
-        _withIconLoading = false;
     }
 
     private async Task EnterOnlyIconLoading()

site/AntDesign.Docs/Demos/Components/Button/demo/loading.md

@@ -7,8 +7,12 @@ title:
 
 ## zh-CN
 
-添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
+添加 `Loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
+
+使用 `AutoLoading` 属性可为绑定 `OnClick` 回调的异步方法自动处理加载状态。
 
 ## en-US
 
-A loading indicator can be added to a button by setting the `loading` property on the `Button`.
+A loading indicator can be added to a button by setting the `Loading` parameter on the `Button`.
+
+Use the `AutoLoading` parameter to automatically add and deactivate load states for asynchronous methods that bind the `OnClick` callback.