Feat: Add LoadingButton #4368 (#4384)

### What problem does this PR solve?

Feat: Add LoadingButton #4368

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

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

@@ -2,7 +2,6 @@ import { LlmModelType } from '@/constants/knowledge';
 import { useSetModalState } from '@/hooks/common-hooks';
 import {
   useFetchKnowledgeBaseConfiguration,
-  useRenameTag,
   useUpdateKnowledge,
 } from '@/hooks/knowledge-hooks';
 import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
@@ -97,21 +96,6 @@ export const useRenameKnowledgeTag = () => {
     hideModal: hideTagRenameModal,
     showModal: showFileRenameModal,
   } = useSetModalState();
-  const { renameTag, loading } = useRenameTag();
-
-  const onTagRenameOk = useCallback(
-    async (name: string) => {
-      const ret = await renameTag({
-        fromTag: tag,
-        toTag: name,
-      });
-
-      if (ret === 0) {
-        hideTagRenameModal();
-      }
-    },
-    [renameTag, tag, hideTagRenameModal],
-  );
 
   const handleShowTagRenameModal = useCallback(
     (record: string) => {
@@ -122,9 +106,7 @@ export const useRenameKnowledgeTag = () => {
   );
 
   return {
-    renameLoading: loading,
     initialName: tag,
-    onTagRenameOk,
     tagRenameVisible,
     hideTagRenameModal,
     showTagRenameModal: handleShowTagRenameModal,

web/src/pages/add-knowledge/components/knowledge-setting/tag-table/index.tsx

@@ -74,7 +74,6 @@ export function TagTable() {
     showTagRenameModal,
     hideTagRenameModal,
     tagRenameVisible,
-    onTagRenameOk,
     initialName,
   } = useRenameKnowledgeTag();
 
@@ -300,7 +299,6 @@ export function TagTable() {
       {tagRenameVisible && (
         <RenameDialog
           hideModal={hideTagRenameModal}
-          onOk={onTagRenameOk}
           initialName={initialName}
         ></RenameDialog>
       )}

web/src/pages/add-knowledge/components/knowledge-setting/tag-table/rename-dialog/index.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -6,6 +5,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { LoadingButton } from '@/components/ui/loading-button';
+import { useTagIsRenaming } from '@/hooks/knowledge-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { TagRenameId } from '@/pages/add-knowledge/constant';
 import { useTranslation } from 'react-i18next';
@@ -16,6 +17,7 @@ export function RenameDialog({
   initialName,
 }: IModalProps<any> & { initialName: string }) {
   const { t } = useTranslation();
+  const loading = useTagIsRenaming();
 
   return (
     <Dialog open onOpenChange={hideModal}>
@@ -28,9 +30,9 @@ export function RenameDialog({
           hideModal={hideModal}
         ></RenameForm>
         <DialogFooter>
-          <Button type="submit" form={TagRenameId}>
+          <LoadingButton type="submit" form={TagRenameId} loading={loading}>
             {t('common.save')}
-          </Button>
+          </LoadingButton>
         </DialogFooter>
       </DialogContent>
     </Dialog>