feat: show loading button when pushing test notifications

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();
               }}

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();
               }}

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();
               }}

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();
               }}

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();
               }}

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();
               }}

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();
               }}

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 Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, loading, asChild = false, children, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
+  if (asChild) {
-  return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    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";