Feat: Replace the submit form button with ButtonLoading #3221 (#7547)

### What problem does this PR solve?

Feat: Replace the submit form button with ButtonLoading #3221

### Type of change


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

web/src/pages/dataset/dataset/set-meta-dialog.tsx

@@ -5,7 +5,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { LoadingButton } from '@/components/ui/loading-button';
 import { IModalProps } from '@/interfaces/common';
 import { TagRenameId } from '@/pages/add-knowledge/constant';
 import { useTranslation } from 'react-i18next';
@@ -14,6 +13,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { ButtonLoading } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -118,9 +118,9 @@ export function SetMetaDialog({
           </form>
         </Form>
         <DialogFooter>
-          <LoadingButton type="submit" form={TagRenameId} loading={loading}>
+          <ButtonLoading type="submit" form={TagRenameId} loading={loading}>
             {t('common.save')}
-          </LoadingButton>
+          </ButtonLoading>
         </DialogFooter>
       </DialogContent>
     </Dialog>

web/src/pages/files/link-to-dataset-dialog.tsx

@@ -1,3 +1,4 @@
+import { ButtonLoading } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -13,7 +14,6 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { LoadingButton } from '@/components/ui/loading-button';
 import { MultiSelect } from '@/components/ui/multi-select';
 import { useSelectKnowledgeOptions } from '@/hooks/knowledge-hooks';
 import { IModalProps } from '@/interfaces/common';
@@ -113,16 +113,11 @@ export function LinkToDatasetDialog({
           onConnectToKnowledgeOk={onConnectToKnowledgeOk}
         ></LinkToDatasetForm>
         <DialogFooter>
-          <LoadingButton
-            type="submit"
-            variant={'tertiary'}
-            form={FormId}
-            loading={loading}
-          >
+          <ButtonLoading type="submit" form={FormId} loading={loading}>
             <div className="flex gap-2 items-center">
               <Link2 /> Save
             </div>
-          </LoadingButton>
+          </ButtonLoading>
         </DialogFooter>
       </DialogContent>
     </Dialog>

web/src/pages/files/move-dialog.tsx

@@ -2,7 +2,7 @@ import {
   AsyncTreeSelect,
   TreeNodeType,
 } from '@/components/ui/async-tree-select';
-import { Button } from '@/components/ui/button';
+import { ButtonLoading } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -17,7 +17,7 @@ import { isEmpty } from 'lodash';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export function MoveDialog({ hideModal, onOk }: IModalProps<any>) {
+export function MoveDialog({ hideModal, onOk, loading }: IModalProps<any>) {
   const { t } = useTranslation();
 
   const { fetchList } = useFetchPureFileList();
@@ -69,13 +69,14 @@ export function MoveDialog({ hideModal, onOk }: IModalProps<any>) {
           ></AsyncTreeSelect>
         </div>
         <DialogFooter>
-          <Button
+          <ButtonLoading
             type="submit"
             onClick={handleSubmit}
             disabled={isEmpty(treeValue)}
+            loading={loading}
           >
             {t('common.save')}
-          </Button>
+          </ButtonLoading>
         </DialogFooter>
       </DialogContent>
     </Dialog>