From 4e701b1efda086fcb68577575a5d4a5451f04f6a Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Wed, 18 Jun 2025 09:24:41 +0800
Subject: [PATCH] fix(web): enhance API test page experience by adding loading
 state for test button (#21091)

---
 .../tools/edit-custom-collection-modal/test-api.tsx         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
index 0079bad7c7..a03364aa3d 100644
--- a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
@@ -31,10 +31,13 @@ const TestApi: FC<Props> = ({
   const language = getLanguage(locale)
   const [credentialsModalShow, setCredentialsModalShow] = useState(false)
   const [tempCredential, setTempCredential] = React.useState<Credential>(customCollection.credentials)
+  const [testing, setTesting] = useState(false)
   const [result, setResult] = useState<string>('')
   const { operation_id: toolName, parameters } = tool
   const [parametersValue, setParametersValue] = useState<Record<string, string>>({})
   const handleTest = async () => {
+    if (testing) return
+    setTesting(true)
     // clone test schema
     const credentials = JSON.parse(JSON.stringify(tempCredential)) as Credential
     if (credentials.auth_type === AuthType.none) {
@@ -52,6 +55,7 @@ const TestApi: FC<Props> = ({
     }
     const res = await testAPIAvailable(data) as any
     setResult(res.error || res.result)
+    setTesting(false)
   }
 
   return (
@@ -107,7 +111,7 @@ const TestApi: FC<Props> = ({
               </div>
 
             </div>
-            <Button variant='primary' className=' mt-4 h-10 w-full' onClick={handleTest}>{t('tools.test.title')}</Button>
+            <Button variant='primary' className=' mt-4 h-10 w-full' loading={testing} disabled={testing} onClick={handleTest}>{t('tools.test.title')}</Button>
             <div className='mt-6'>
               <div className='flex items-center space-x-3'>
                 <div className='system-xs-semibold text-text-tertiary'>{t('tools.test.testResult')}</div>