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