From 2f509f79035d3102310a5d431aa220f44c016ddf Mon Sep 17 00:00:00 2001
From: Ravinou <dev@r4ven.fr>
Date: Sat, 10 Aug 2024 17:42:21 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20=F0=9F=8E=A8=20improve=20delete=20token?=
 =?UTF-8?q?=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UserSettings/Integrations/Integrations.js | 27 +++++++++++++------
 .../UserSettings/UserSettings.module.css      | 14 ++++++++++
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/Containers/UserSettings/Integrations/Integrations.js b/Containers/UserSettings/Integrations/Integrations.js
index 7cc08f8..8521549 100644
--- a/Containers/UserSettings/Integrations/Integrations.js
+++ b/Containers/UserSettings/Integrations/Integrations.js
@@ -35,6 +35,7 @@ export default function Integrations() {
 
   ////State
   const [isLoading, setIsLoading] = useState(false);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [tokenList, setTokenList] = useState([]);
   const [error, setError] = useState();
   const [lastGeneratedToken, setLastGeneratedToken] = useState();
@@ -137,6 +138,7 @@ export default function Integrations() {
 
   //Delete token
   const deleteTokenHandler = async (tokenName) => {
+    setIsDeleteLoading(true);
     try {
       const response = await fetch('/api/account/tokenManager', {
         method: 'DELETE',
@@ -152,15 +154,18 @@ export default function Integrations() {
       if (!response.ok) {
         toast.error(result.message, toastOptions);
         setTimeout(() => setError(), 4000);
+        setIsDeleteLoading(false);
       } else {
         fetchTokenList();
+        setIsDeleteLoading(false);
         toast.success('🗑️ Token deleted !', toastOptions);
       }
     } catch (error) {
-      setIsLoading(false);
+      setIsDeleteLoading(false);
       toast.error("Can't delete your token. Contact your administrator.", toastOptions);
       setTimeout(() => setError(), 4000);
     } finally {
+      setIsDeleteLoading(false);
       setDeletingToken(null);
     }
   };
@@ -221,7 +226,7 @@ export default function Integrations() {
               disabled={!isValid || isSubmitting || hasNoPermissionSelected()}
             >
               {isLoading ? (
-                <SpinnerDotted size={20} thickness={150} speed={100} color='#fff' />
+                <SpinnerDotted size={15} thickness={150} speed={100} color='#fff' />
               ) : (
                 'Generate'
               )}
@@ -296,15 +301,21 @@ export default function Integrations() {
                           <button
                             className={classes.confirmButton}
                             onClick={() => deleteTokenHandler(token.name)}
+                            disabled={isDeleteLoading}
                           >
                             Confirm
+                            {isDeleteLoading && (
+                              <SpinnerDotted size={15} thickness={150} speed={100} color='#fff' />
+                            )}{' '}
                           </button>
-                          <button
-                            className={classes.cancelButton}
-                            onClick={() => setDeletingToken(null)}
-                          >
-                            Cancel
-                          </button>
+                          {!isDeleteLoading && (
+                            <button
+                              className={classes.cancelButton}
+                              onClick={() => setDeletingToken(null)}
+                            >
+                              Cancel
+                            </button>
+                          )}
                         </div>
                       )}
                     </div>
diff --git a/Containers/UserSettings/UserSettings.module.css b/Containers/UserSettings/UserSettings.module.css
index e5ec7f0..459e774 100644
--- a/Containers/UserSettings/UserSettings.module.css
+++ b/Containers/UserSettings/UserSettings.module.css
@@ -184,6 +184,11 @@
   transform: scale(0.9);
 }
 
+.deleteConfirmationButtons {
+  display: flex;
+  flex-direction: row;
+}
+
 .confirmButton {
   border: 0;
   padding: 10px 15px;
@@ -195,6 +200,15 @@
   text-decoration: none;
   font-weight: bold;
   font-size: 1em;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.confirmButton:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .confirmButton:hover {