From 8fecebc254e1afdd839510b40c950315da3279cf Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Sun, 10 Nov 2024 20:00:19 +0800
Subject: [PATCH] feat: show loading button when pushing test notifications

---
 ui/src/components/notify/Bark.tsx       |  8 ++++++
 ui/src/components/notify/DingTalk.tsx   |  8 ++++++
 ui/src/components/notify/Email.tsx      |  8 ++++++
 ui/src/components/notify/Lark.tsx       |  8 ++++++
 ui/src/components/notify/ServerChan.tsx |  8 ++++++
 ui/src/components/notify/Telegram.tsx   |  8 ++++++
 ui/src/components/notify/Webhook.tsx    |  8 ++++++
 ui/src/components/ui/button.tsx         | 34 ++++++++++++++++++++++---
 8 files changed, 87 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/notify/Bark.tsx b/ui/src/components/notify/Bark.tsx
index 6584b542..0b651cb6 100644
--- a/ui/src/components/notify/Bark.tsx
+++ b/ui/src/components/notify/Bark.tsx
@@ -123,8 +123,13 @@ const Bark = () => {
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("bark");
 
       toast({
@@ -139,6 +144,8 @@ const Bark = () => {
         description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
@@ -238,6 +245,7 @@ const Bark = () => {
           <Show when={!changed && bark.id != ""}>
             <Button
               variant="secondary"
+              loading={testing}
               onClick={() => {
                 handlePushTestClick();
               }}
diff --git a/ui/src/components/notify/DingTalk.tsx b/ui/src/components/notify/DingTalk.tsx
index 76ab89d9..ab9ff9d1 100644
--- a/ui/src/components/notify/DingTalk.tsx
+++ b/ui/src/components/notify/DingTalk.tsx
@@ -120,11 +120,18 @@ const DingTalk = () => {
         description: `${t("settings.notification.config.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("dingtalk");
 
       toast({
@@ -236,6 +243,7 @@ const DingTalk = () => {
           <Show when={!changed && dingtalk.id != ""}>
             <Button
               variant="secondary"
+              loading={testing}
               onClick={() => {
                 handlePushTestClick();
               }}
diff --git a/ui/src/components/notify/Email.tsx b/ui/src/components/notify/Email.tsx
index ecc83b0a..f778e73c 100644
--- a/ui/src/components/notify/Email.tsx
+++ b/ui/src/components/notify/Email.tsx
@@ -146,8 +146,13 @@ const Mail = () => {
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("email");
 
       toast({
@@ -162,6 +167,8 @@ const Mail = () => {
         description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
@@ -360,6 +367,7 @@ const Mail = () => {
           <Show when={!changed && mail.id != ""}>
             <Button
               variant="secondary"
+              loading={testing}
               onClick={() => {
                 handlePushTestClick();
               }}
diff --git a/ui/src/components/notify/Lark.tsx b/ui/src/components/notify/Lark.tsx
index 91041357..89a6eadd 100644
--- a/ui/src/components/notify/Lark.tsx
+++ b/ui/src/components/notify/Lark.tsx
@@ -116,11 +116,18 @@ const Lark = () => {
         description: `${t("settings.notification.config.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("lark");
 
       toast({
@@ -214,6 +221,7 @@ const Lark = () => {
           <Show when={!changed && lark.id != ""}>
             <Button
               variant="secondary"
+              loading={testing}
               onClick={() => {
                 handlePushTestClick();
               }}
diff --git a/ui/src/components/notify/ServerChan.tsx b/ui/src/components/notify/ServerChan.tsx
index 97f995f8..ee9b23eb 100644
--- a/ui/src/components/notify/ServerChan.tsx
+++ b/ui/src/components/notify/ServerChan.tsx
@@ -130,8 +130,13 @@ const ServerChan = () => {
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("serverchan");
 
       toast({
@@ -146,6 +151,8 @@ const ServerChan = () => {
         description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
@@ -225,6 +232,7 @@ const ServerChan = () => {
           <Show when={!changed && serverchan.id != ""}>
             <Button
               variant="secondary"
+              loading={testing}
               onClick={() => {
                 handlePushTestClick();
               }}
diff --git a/ui/src/components/notify/Telegram.tsx b/ui/src/components/notify/Telegram.tsx
index fdc47c05..63f6079c 100644
--- a/ui/src/components/notify/Telegram.tsx
+++ b/ui/src/components/notify/Telegram.tsx
@@ -123,8 +123,13 @@ const Telegram = () => {
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("telegram");
 
       toast({
@@ -139,6 +144,8 @@ const Telegram = () => {
         description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
@@ -238,6 +245,7 @@ const Telegram = () => {
           <Show when={!changed && telegram.id != ""}>
             <Button
               variant="secondary"
+              loading={testing}
               onClick={() => {
                 handlePushTestClick();
               }}
diff --git a/ui/src/components/notify/Webhook.tsx b/ui/src/components/notify/Webhook.tsx
index 6bacc16e..70c8d052 100644
--- a/ui/src/components/notify/Webhook.tsx
+++ b/ui/src/components/notify/Webhook.tsx
@@ -130,8 +130,13 @@ const Webhook = () => {
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("webhook");
 
       toast({
@@ -146,6 +151,8 @@ const Webhook = () => {
         description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
@@ -225,6 +232,7 @@ const Webhook = () => {
           <Show when={!changed && webhook.id != ""}>
             <Button
               variant="secondary"
+              loading={testing}
               onClick={() => {
                 handlePushTestClick();
               }}
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button.tsx
index 3c999f71..0b9957db 100644
--- a/ui/src/components/ui/button.tsx
+++ b/ui/src/components/ui/button.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -32,11 +33,38 @@ const buttonVariants = cva(
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  loading?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-  return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, loading, asChild = false, children, ...props }, ref) => {
+  if (asChild) {
+    return (
+      <Slot ref={ref} {...props}>
+        <>
+          {React.Children.map(children as React.ReactElement, (child: React.ReactElement) => {
+            return React.cloneElement(child, {
+              className: cn(buttonVariants({ variant, size }), className),
+              children: (
+                <>
+                  {loading && <Loader2 className={cn("h-4 w-4 animate-spin", children && "mr-2")} />}
+                  {child.props.children}
+                </>
+              ),
+            });
+          })}
+        </>
+      </Slot>
+    );
+  }
+
+  return (
+    <button className={cn(buttonVariants({ variant, size, className }))} disabled={loading} ref={ref} {...props}>
+      <>
+        {loading && <Loader2 className={cn("h-4 w-4 animate-spin", children && "mr-2")} />}
+        {children}
+      </>
+    </button>
+  );
 });
 Button.displayName = "Button";