fix: add spin to parsing status icon of dataset table (#649)

### What problem does this PR solve?

fix: add spin to parsing status icon of dataset table
#648 

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/hooks/documentHooks.ts

@@ -7,6 +7,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
 import { useDispatch, useSelector } from 'umi';
 import { useGetKnowledgeSearchParams } from './routeHook';
+import { useOneNamespaceEffectsLoading } from './storeHooks';
 
 export const useGetDocumentUrl = (documentId: string) => {
   const url = useMemo(() => {
@@ -222,3 +223,8 @@ export const useRunDocument = () => {
 
   return runDocumentByIds;
 };
+
+export const useSelectRunDocumentLoading = () => {
+  const loading = useOneNamespaceEffectsLoading('kFModel', ['document_run']);
+  return loading;
+};

web/src/pages/add-knowledge/components/knowledge-file/hooks.ts

@@ -2,7 +2,9 @@ import { useSetModalState, useTranslate } from '@/hooks/commonHooks';
 import {
   useCreateDocument,
   useFetchDocumentList,
+  useRunDocument,
   useSaveDocumentName,
+  useSelectRunDocumentLoading,
   useSetDocumentParser,
   useUploadDocument,
 } from '@/hooks/documentHooks';
@@ -283,3 +285,36 @@ export const useHandleUploadDocument = () => {
     showDocumentUploadModal,
   };
 };
+
+export const useHandleRunDocumentByIds = (id: string) => {
+  const loading = useSelectRunDocumentLoading();
+  const runDocumentByIds = useRunDocument();
+  const [currentId, setCurrentId] = useState<string>('');
+  const isLoading = loading && currentId !== '' && currentId === id;
+
+  const handleRunDocumentByIds = async (
+    documentId: string,
+    knowledgeBaseId: string,
+    isRunning: boolean,
+  ) => {
+    if (isLoading) {
+      return;
+    }
+    setCurrentId(documentId);
+    try {
+      await runDocumentByIds({
+        doc_ids: [documentId],
+        run: isRunning ? 2 : 1,
+        knowledgeBaseId,
+      });
+      setCurrentId('');
+    } catch (error) {
+      setCurrentId('');
+    }
+  };
+
+  return {
+    handleRunDocumentByIds,
+    loading: isLoading,
+  };
+};

web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less

@@ -23,3 +23,14 @@
     cursor: pointer;
   }
 }
+.operationIconSpin {
+  animation: spin 1s linear infinite;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx

@@ -2,12 +2,13 @@ import { ReactComponent as CancelIcon } from '@/assets/svg/cancel.svg';
 import { ReactComponent as RefreshIcon } from '@/assets/svg/refresh.svg';
 import { ReactComponent as RunIcon } from '@/assets/svg/run.svg';
 import { useTranslate } from '@/hooks/commonHooks';
-import { useRunDocument } from '@/hooks/documentHooks';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { Badge, DescriptionsProps, Flex, Popover, Space, Tag } from 'antd';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import reactStringReplace from 'react-string-replace';
 import { RunningStatus, RunningStatusMap } from '../constant';
+import { useHandleRunDocumentByIds } from '../hooks';
 import { isParserRunning } from '../utils';
 import styles from './index.less';
 
@@ -81,7 +82,9 @@ export const ParsingStatusCell = ({ record }: IProps) => {
   const text = record.run;
   const runningStatus = RunningStatusMap[text];
   const { t } = useTranslation();
-  const runDocumentByIds = useRunDocument();
+  const { handleRunDocumentByIds, loading } = useHandleRunDocumentByIds(
+    record.id,
+  );
 
   const isRunning = isParserRunning(text);
 
@@ -90,11 +93,7 @@ export const ParsingStatusCell = ({ record }: IProps) => {
   const label = t(`knowledgeDetails.runningStatus${text}`);
 
   const handleOperationIconClick = () => {
-    runDocumentByIds({
+    handleRunDocumentByIds(record.id, record.kb_id, isRunning);
-      doc_ids: [record.id],
-      run: isRunning ? 2 : 1,
-      knowledgeBaseId: record.kb_id,
-    });
   };
 
   return (
@@ -112,7 +111,12 @@ export const ParsingStatusCell = ({ record }: IProps) => {
           )}
         </Tag>
       </Popover>
-      <div onClick={handleOperationIconClick} className={styles.operationIcon}>
+      <div
+        onClick={handleOperationIconClick}
+        className={classNames(styles.operationIcon, {
+          [styles.operationIconSpin]: loading,
+        })}
+      >
         <OperationIcon />
       </div>
     </Flex>

web/src/pages/file-manager/index.less

@@ -1,5 +1,5 @@
 .fileManagerWrapper {
-  flex-basis: 100%;
+  width: 100%;
   padding: 32px;
 }