From f0690f7d56fd4a541f4078b32662f62fbfc9194d Mon Sep 17 00:00:00 2001
From: James Yeung <shunjiey@hotmail.com>
Date: Thu, 12 Sep 2024 07:15:18 +0800
Subject: [PATCH] feat(module: button): add AutoLoading parameter (#4193)

---
 components/button/Button.razor.cs              | 18 +++++++++++++++++-
 .../Demos/Components/Button/demo/Loading.razor | 10 ++--------
 .../Demos/Components/Button/demo/loading.md    |  8 ++++++--
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/components/button/Button.razor.cs b/components/button/Button.razor.cs
index 1896b2c59..0eb4391d5 100644
--- a/components/button/Button.razor.cs
+++ b/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);
+                }
             }
         }
 
diff --git a/site/AntDesign.Docs/Demos/Components/Button/demo/Loading.razor b/site/AntDesign.Docs/Demos/Components/Button/demo/Loading.razor
index 5602a9742..f922ada3f 100644
--- a/site/AntDesign.Docs/Demos/Components/Button/demo/Loading.razor
+++ b/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()
diff --git a/site/AntDesign.Docs/Demos/Components/Button/demo/loading.md b/site/AntDesign.Docs/Demos/Components/Button/demo/loading.md
index a3d8ae4ca..29fddadbd 100644
--- a/site/AntDesign.Docs/Demos/Components/Button/demo/loading.md
+++ b/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`.
\ No newline at end of file
+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. 
\ No newline at end of file