From 53bbbb7fe48f3629d599db362e0c4cfadf5f754d Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 19 Dec 2024 05:15:39 +0100
Subject: [PATCH] enhancement(frontend): added loading state to secrets

---
 .../pages/settings/Secrets/Secrets.tsx        | 57 ++++++++++++-------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
index 8571e2b00..218b291d3 100644
--- a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
+++ b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
@@ -8,12 +8,18 @@ const {Title, Text} = Typography
 export default function Secrets() {
     const {secrets, handleModifyVaultSecret, handleDeleteVaultSecret} = useVaultSecret()
     const [llmProviderKeys, setLlmProviderKeys] = useState<LlmProvider[]>([])
+    const [loadingSecrets, setLoadingSecrets] = useState<Record<string, boolean>>({})
     const [messageAPI, contextHolder] = message.useMessage()
 
     useEffect(() => {
         setLlmProviderKeys(secrets)
     }, [secrets])
 
+    const setSecretLoading = (id: string | undefined, isLoading: boolean) => {
+        if (!id) return
+        setLoadingSecrets((prev) => ({...prev, [id]: isLoading}))
+    }
+
     return (
         <div data-cy="secrets">
             {contextHolder}
@@ -49,34 +55,45 @@ export default function Secrets() {
                                     data-cy="openai-api-save"
                                     type="primary"
                                     disabled={!key}
+                                    loading={loadingSecrets[secretId || ""] === true}
                                     onClick={async () => {
-                                        await handleModifyVaultSecret({
-                                            name,
-                                            title,
-                                            key,
-                                            id: secretId,
-                                        })
-
-                                        messageAPI.success("The secret is saved")
+                                        if (!secretId) return
+                                        setSecretLoading(secretId, true)
+                                        try {
+                                            await handleModifyVaultSecret({
+                                                name,
+                                                title,
+                                                key,
+                                                id: secretId,
+                                            })
+                                            messageAPI.success("The secret is saved")
+                                        } finally {
+                                            setSecretLoading(secretId, false)
+                                        }
                                     }}
                                 >
                                     Save
                                 </Button>
                                 <Button
                                     disabled={!Boolean(key)}
+                                    loading={loadingSecrets[secretId || ""] === true}
                                     onClick={async () => {
-                                        await handleDeleteVaultSecret({
-                                            name,
-                                            id: secretId,
-                                            title,
-                                            key,
-                                        })
-
-                                        const newLlmProviderKeys = [...llmProviderKeys]
-                                        newLlmProviderKeys[i].key = ""
-                                        setLlmProviderKeys(newLlmProviderKeys)
-
-                                        messageAPI.warning("The secret is deleted")
+                                        if (!secretId) return
+                                        setSecretLoading(secretId, true)
+                                        try {
+                                            await handleDeleteVaultSecret({
+                                                name,
+                                                id: secretId,
+                                                title,
+                                                key,
+                                            })
+                                            const newLlmProviderKeys = [...llmProviderKeys]
+                                            newLlmProviderKeys[i].key = ""
+                                            setLlmProviderKeys(newLlmProviderKeys)
+                                            messageAPI.warning("The secret is deleted")
+                                        } finally {
+                                            setSecretLoading(secretId, false)
+                                        }
                                     }}
                                 >
                                     Delete