feat: Add support for independent loading states to optimize user experience…

feat: Add support for independent loading states to optimize user experience during model testing (#4366)

* feat: 添加独立的loading状态支持，优化模型测试过程中的用户体验

* fix: typo

* refactor: 修改loading状态字段名称，提升代码可读性

* feat: optimize model testing functionality, integrate loading state management, improve user experience

projects/app/src/pageComponents/account/model/Channel/ModelTest.tsx

@@ -33,6 +33,7 @@ type ModelTestItem = {
   status: 'waiting' | 'running' | 'success' | 'error';
   message?: string;
   duration?: number;
+  loading?: boolean; // 单个模型的loading状态
 };
 
 const ModelTest = ({
@@ -85,7 +86,8 @@ const ModelTest = ({
               </HStack>
             ),
             model: modelData.model,
-            status: 'waiting'
+            status: 'waiting',
+            loading: false
           };
         })
         .filter(Boolean) as ModelTestItem[];
@@ -93,14 +95,16 @@ const ModelTest = ({
     }
   });
 
-  const { runAsync: onStartTest, loading: isTesting } = useRequest2(
+  const { runAsync: onStartTest, loading: isAnyModelLoading } = useRequest2(
     async () => {
-      {
+      try {
         let errorNum = 0;
         const testModel = async (model: string) => {
           setTestModelList((prev) =>
             prev.map((item) =>
-              item.model === model ? { ...item, status: 'running', message: '' } : item
+              item.model === model
+                ? { ...item, status: 'running', message: '', loading: true }
+                : item
             )
           );
           const start = Date.now();
@@ -110,7 +114,7 @@ const ModelTest = ({
             setTestModelList((prev) =>
               prev.map((item) =>
                 item.model === model
-                  ? { ...item, status: 'success', duration: duration / 1000 }
+                  ? { ...item, status: 'success', duration: duration / 1000, loading: false }
                   : item
               )
             );
@@ -118,7 +122,7 @@ const ModelTest = ({
             setTestModelList((prev) =>
               prev.map((item) =>
                 item.model === model
-                  ? { ...item, status: 'error', message: getErrText(error) }
+                  ? { ...item, status: 'error', message: getErrText(error), loading: false }
                   : item
               )
             );
@@ -138,19 +142,22 @@ const ModelTest = ({
             title: t('account_model:test_failed', { num: errorNum })
           });
         }
+      } catch (error) {
+        console.error('Error during model testing:', error);
       }
     },
     {
       refreshDeps: [testModelList]
     }
   );
+
   const { runAsync: onTestOneModel, loading: testingOneModel } = useRequest2(
     async (model: string) => {
       const start = Date.now();
 
       setTestModelList((prev) =>
         prev.map((item) =>
-          item.model === model ? { ...item, status: 'running', message: '' } : item
+          item.model === model ? { ...item, status: 'running', message: '', loading: true } : item
         )
       );
 
@@ -160,13 +167,17 @@ const ModelTest = ({
 
         setTestModelList((prev) =>
           prev.map((item) =>
-            item.model === model ? { ...item, status: 'success', duration: duration / 1000 } : item
+            item.model === model
+              ? { ...item, status: 'success', duration: duration / 1000, loading: false }
+              : item
           )
         );
       } catch (error) {
         setTestModelList((prev) =>
           prev.map((item) =>
-            item.model === model ? { ...item, status: 'error', message: getErrText(error) } : item
+            item.model === model
+              ? { ...item, status: 'error', message: getErrText(error), loading: false }
+              : item
           )
         );
       }
@@ -176,8 +187,6 @@ const ModelTest = ({
     }
   );
 
-  const isTestLoading = testingOneModel || isTesting;
-
   return (
     <MyModal
       iconSrc={'core/chat/sendLight'}
@@ -222,12 +231,10 @@ const ModelTest = ({
                     </Td>
                     <Td>
                       <MyIconButton
-                        isLoading={isTestLoading}
+                        isLoading={item.loading}
                         icon={'core/chat/sendLight'}
                         tip={t('account:model.test_model')}
-                        onClick={() => {
-                          onTestOneModel(item.model);
-                        }}
+                        onClick={() => onTestOneModel(item.model)}
                       />
                     </Td>
                   </Tr>
@@ -241,7 +248,11 @@ const ModelTest = ({
         <Button mr={4} variant={'whiteBase'} onClick={onClose}>
           {t('common:common.Cancel')}
         </Button>
-        <Button isLoading={isTestLoading} variant={'primary'} onClick={onStartTest}>
+        <Button
+          isLoading={isAnyModelLoading || testingOneModel}
+          variant={'primary'}
+          onClick={onStartTest}
+        >
           {t('account_model:start_test', { num: testModelList.length })}
         </Button>
       </ModalFooter>