fix: anti double submit in form

src/hooks/use-submit-lock.ts

@@ -0,0 +1,46 @@
+import { useMemoizedFn } from 'ahooks';
+import { useRef, useState } from 'react';
+
+/**
+ * Centralizes the anti-double-submit + anti-deadlock logic shared by the
+ * "add/edit" modals.
+ *
+ * The lock has to straddle antd's async field validation, whose result comes
+ * back through two separate callbacks (`onFinish` / `onFinishFailed`). So the
+ * three wiring points below are intentional and map 1:1 to those anchors:
+ *
+ * - `guard`   wrap the submit trigger (button / ModalFooter onOk). Blocks
+ *             re-entry while a submit is already in flight, then fires submit.
+ * - `run`     wrap the `onFinish` handler. Holds the lock + loading until the
+ *             `onOk` request settles (success or error).
+ * - `release` pass as the form's `onFinishFailed`. Releases the lock when
+ *             validation fails, otherwise the button would dead-lock.
+ */
+export default function useSubmitLock() {
+  const [loading, setLoading] = useState<boolean>(false);
+  const lockRef = useRef<boolean>(false);
+
+  const release = useMemoizedFn(() => {
+    setLoading(false);
+    lockRef.current = false;
+  });
+
+  const guard = useMemoizedFn((submit: () => void) => {
+    if (lockRef.current) {
+      return;
+    }
+    lockRef.current = true;
+    submit();
+  });
+
+  const run = useMemoizedFn(async (task: () => void | Promise<void>) => {
+    setLoading(true);
+    try {
+      await task();
+    } finally {
+      release();
+    }
+  });
+
+  return { loading, guard, run, release };
+}

src/pages/api-keys/components/add-apikey-modal/index.tsx

@@ -1,5 +1,6 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import {
   AlertBlockInfo,
   Input as CInput,
@@ -45,7 +46,7 @@ const AddModal: React.FC<AddModalProps> = ({
   const intl = useIntl();
   const [showKey, setShowKey] = useState(false);
   const [apikeyValue, setAPIKeyValue] = useState('');
-  const [loading, setLoading] = useState(false);
+  const { loading, guard, run, release } = useSubmitLock();
   const [isChanged, setIsChanged] = useState(false);
   const cacheFormRef = useRef<{
     allowed_type: string;
@@ -116,31 +117,31 @@ const AddModal: React.FC<AddModalProps> = ({
   };
 
   const handleOnOk = async (formdata: FormData) => {
-    try {
+    await run(async () => {
-      setLoading(true);
+      try {
-      const data = {
+        const data = {
-        ..._.omit(formdata, ['allowed_type']),
+          ..._.omit(formdata, ['allowed_type']),
-        allowed_model_names:
+          allowed_model_names:
-          formdata.allowed_type === 'all' ||
+            formdata.allowed_type === 'all' ||
-          !formdata.scope?.includes('inference')
+            !formdata.scope?.includes('inference')
-            ? []
+              ? []
-            : formdata.allowed_model_names || []
+              : formdata.allowed_model_names || []
-      };
+        };
-      if (action === PageAction.CREATE) {
+        if (action === PageAction.CREATE) {
-        await createAPIKey(data);
+          await createAPIKey(data);
-      } else if (action === PageAction.EDIT && currentData?.id) {
+        } else if (action === PageAction.EDIT && currentData?.id) {
-        await updateAPIKey({
+          await updateAPIKey({
-          ..._.omit(data, ['expires_in'])
+            ..._.omit(data, ['expires_in'])
-        });
+          });
+        }
+      } catch (error) {
+        // handled in interceptor
       }
-      setLoading(false);
+    });
-    } catch (error) {
-      setLoading(false);
-    }
   };
 
   const handleSumit = () => {
-    form.submit();
+    guard(() => form.submit());
   };
 
   const handleDone = () => {
@@ -278,6 +279,7 @@ const AddModal: React.FC<AddModalProps> = ({
           name="addAPIKey"
           form={form}
           onFinish={handleOnOk}
+          onFinishFailed={release}
           preserve={false}
           initialValues={{
             allowed_type: 'all',

src/pages/backends/components/add-modal.tsx

@@ -1,5 +1,6 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import {
   AlertBlockInfo,
   GSDrawer,
@@ -63,6 +64,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const [yamlContent, setYamlContent] = useState<string>('');
   const [formContent, setFormContent] = useState<FormData>({} as FormData);
   const alertRef = useRef<HTMLDivElement>(null);
+  const { loading, guard, run, release } = useSubmitLock();
 
   const showVersionCustomSuffix =
     currentData?.backend_source === BackendSourceValueMap.BUILTIN ||
@@ -92,17 +94,22 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   };
 
   const onOk = () => {
-    if (activeKey === 'yaml') {
+    guard(() => {
-      const content = editorRef.current?.getContent();
+      if (activeKey === 'yaml') {
-      if (content) {
+        const content = editorRef.current?.getContent();
-        onSubmitYaml({ content: content });
+        if (!content) {
+          // nothing to submit — drop the lock so the button stays usable
+          release();
+          return;
+        }
+        run(() => onSubmitYaml({ content: content }));
+        return;
       }
-    } else {
       formRef.current?.submit();
-    }
+    });
   };
 
-  const onFinish = (values: FormData) => {
+  const onFinish = async (values: FormData) => {
     const versionConfigs = values.version_configs?.reduce(
       (acc: Record<string, any>, curr) => {
         if (curr.version_no) {
@@ -117,16 +124,18 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
     const defaultVersion = values.version_configs?.find((v) => v.is_default);
 
-    onSubmit({
+    await run(() =>
-      ...values,
+      onSubmit({
-      parameter_format:
+        ...values,
-        values.parameter_format === 'auto' || !values.parameter_format
+        parameter_format:
-          ? null
+          values.parameter_format === 'auto' || !values.parameter_format
-          : values.parameter_format,
+            ? null
-      default_version: defaultVersion?.version_no || '',
+            : values.parameter_format,
-      // @ts-ignore
+        default_version: defaultVersion?.version_no || '',
-      version_configs: versionConfigs
+        // @ts-ignore
-    });
+        version_configs: versionConfigs
+      })
+    );
   };
 
   useEffect(() => {
@@ -279,6 +288,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             <ModalFooter
               onCancel={onClose}
               onOk={onOk}
+              loading={loading}
               style={ModalFooterStyle}
             ></ModalFooter>
           </>
@@ -295,6 +305,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
               children: (
                 <BackendForm
                   onFinish={onFinish}
+                  onFinishFailed={release}
                   action={action}
                   currentData={formContent as ListItem}
                   ref={formRef}

src/pages/backends/forms/index.tsx

@@ -13,10 +13,11 @@ type AddModalProps = {
   action: PageActionType;
   currentData?: ListItem;
   onFinish: (values: FormData) => void;
+  onFinishFailed?: (errorInfo: any) => void;
   ref?: any;
 };
 const BackendForm: React.FC<AddModalProps> = forwardRef(
-  ({ action, currentData, onFinish }, ref) => {
+  ({ action, currentData, onFinish, onFinishFailed }, ref) => {
     const intl = useIntl();
     const [form] = Form.useForm();
     const [activeKey, setActiveKey] = React.useState<string[]>([]);
@@ -26,7 +27,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
       currentData?.backend_source === BackendSourceValueMap.BUILTIN ||
       currentData?.backend_source === BackendSourceValueMap.COMMUNITY;
 
-    const onFinishFailed = (errorInfo: any) => {
+    const handleOnFinishFailed = (errorInfo: any) => {
       const errorFields = errorInfo.errorFields || [];
       if (errorFields.length > 0) {
         const versionError = errorFields.find((field: any) =>
@@ -38,6 +39,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
           setActiveKey([]);
         }
       }
+      onFinishFailed?.(errorInfo);
     };
 
     const handleOnFinish = (values: FormData) => {
@@ -106,7 +108,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
           preserve={false}
           scrollToFirstError={true}
           initialValues={_.omit(currentData, ['version_configs'])}
-          onFinishFailed={onFinishFailed}
+          onFinishFailed={handleOnFinishFailed}
         >
           <BasicForm></BasicForm>
           <VersionsForm

src/pages/benchmark/components/add-benchmark-modal.tsx

@@ -1,4 +1,5 @@
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { FormDrawer } from '@gpustack/core-ui';
 import React, { useRef } from 'react';
 import { FormData, BenchmarkListItem as ListItem } from '../config/types';
@@ -22,21 +23,24 @@ const AddBenchmark: React.FC<AddModalProps> = ({
   open,
   currentData,
   clusterList,
-  profilesOptions,
+  profilesOptions = [],
-  datasetList,
+  datasetList = [],
   onOk,
   onCancel
 }) => {
   const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const handleOk = async (data: FormData) => {
-    onOk({
+    await run(() =>
-      ...data
+      onOk({
-    });
+        ...data
+      })
+    );
   };
 
   const handleCancel = () => {
@@ -51,6 +55,7 @@ const AddBenchmark: React.FC<AddModalProps> = ({
       onCancel={handleCancel}
       onSubmit={handleSubmit}
       width={600}
+      loading={loading}
     >
       <BenchmarkForm
         ref={form}
@@ -61,6 +66,7 @@ const AddBenchmark: React.FC<AddModalProps> = ({
         profilesOptions={profilesOptions}
         datasetList={datasetList}
         onFinish={handleOk}
+        onFinishFailed={release}
       />
     </FormDrawer>
   );

src/pages/benchmark/forms/index.tsx

@@ -29,6 +29,7 @@ interface ProviderFormProps {
   datasetList: Global.BaseOption<number | string>[];
   profilesOptions: Global.BaseOption<string>[];
   onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
 }
 
 const TABKeysMap = {
@@ -42,6 +43,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
     action,
     currentData,
     onFinish,
+    onFinishFailed,
     open,
     clusterList,
     profilesOptions,
@@ -122,6 +124,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
         <Form
           form={form}
           onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
           initialValues={{
             dataset_input_tokens: null,
             dataset_output_tokens: null,

src/pages/cluster-management/components/add-cluster.tsx

@@ -1,5 +1,6 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { AlertBlockInfo, FormDrawer, ModalFooter } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
@@ -39,20 +40,23 @@ const AddCluster: React.FC<AddModalProps> = ({
 }) => {
   const intl = useIntl();
   const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
   // Whether the user has changed any k8s_options field. Lifted from ClusterForm
   // so the "re-run registration" notice can sit in the drawer footer, above the
   // Save/Cancel buttons (mirrors the model edit interaction).
   const [k8sOptionsChanged, setK8sOptionsChanged] = useState<boolean>(false);
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const handleOk = async (data: FormData) => {
-    onOk({
+    await run(() =>
-      ...data,
+      onOk({
-      provider
+        ...data,
-    });
+        provider
+      })
+    );
   };
 
   const handleCancel = () => {
@@ -84,6 +88,7 @@ const AddCluster: React.FC<AddModalProps> = ({
           <ModalFooter
             onOk={handleSubmit}
             onCancel={handleCancel}
+            loading={loading}
             style={ModalFooterStyle}
           ></ModalFooter>
         </>
@@ -96,6 +101,7 @@ const AddCluster: React.FC<AddModalProps> = ({
         action={action}
         currentData={currentData}
         onFinish={handleOk}
+        onFinishFailed={release}
         onK8sOptionsChange={setK8sOptionsChanged}
       />
     </FormDrawer>

src/pages/cluster-management/components/cluster-form.tsx

@@ -36,6 +36,7 @@ type AddModalProps = {
   provider: ProviderType;
   credentialList: Global.BaseOption<number>[];
   onFinish: (values: FormData) => void;
+  onFinishFailed?: (errorInfo: any) => void;
   // Reports whether the user has changed any k8s_options field, so the parent
   // can show the "re-run registration" notice in the footer.
   onK8sOptionsChange?: (changed: boolean) => void;
@@ -49,6 +50,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
       currentData,
       credentialList,
       onFinish,
+      onFinishFailed,
       onK8sOptionsChange
     },
     ref
@@ -212,8 +214,9 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
       }
     }));
 
-    const handleOnFinishFailed = () => {
+    const handleOnFinishFailed = (errorInfo: any) => {
       setSubmitAttempted(true);
+      onFinishFailed?.(errorInfo);
     };
 
     return (

src/pages/gpu-service/instances/components/add-modal.tsx

@@ -1,5 +1,6 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { useQueryClusterList } from '@/pages/cluster-management/services/use-query-cluster-list';
 import Separator from '@/pages/llmodels/components/separator';
 import { SearchOutlined } from '@ant-design/icons';
@@ -89,7 +90,7 @@ const AddModal: React.FC<AddModalProps> = ({
   const [templateId, setTemplateId] = useState<number | undefined>();
   const [instanceKeyword, setInstanceKeyword] = useState('');
   const [templateKeyword, setTemplateKeyword] = useState('');
-  const [loading, setLoading] = useState(false);
+  const { loading, guard, run, release } = useSubmitLock();
   const initializedRef = useRef(false);
 
   const {
@@ -385,7 +386,7 @@ const AddModal: React.FC<AddModalProps> = ({
   });
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const handleCancel = () => {
@@ -394,15 +395,12 @@ const AddModal: React.FC<AddModalProps> = ({
   };
 
   const onFinish = async (values: FormData) => {
-    setLoading(true);
+    await run(async () => {
-    try {
       await onOk({
         ...values
       });
       console.log('submit form values', values);
-    } finally {
+    });
-      setLoading(false);
-    }
   };
 
   const handleInstanceTypeChange = (item: InstanceTypeItem) => {
@@ -576,6 +574,7 @@ const AddModal: React.FC<AddModalProps> = ({
                 currentData={data}
                 disabled={readonly}
                 onFinish={onFinish}
+                onFinishFailed={release}
                 onScopeChange={handleScopeChange}
                 open={open}
                 instanceTypeList={ownedInstanceTypes}

src/pages/gpu-service/instances/forms/index.tsx

@@ -70,6 +70,7 @@ interface InstanceFormProps {
   // tenant-scoped instance-type / template offerings.
   onScopeChange?: (orgId: number | null | undefined) => void;
   onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
 }
 
 const TABKeysMap = {
@@ -113,7 +114,8 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
       instanceTypeList = [],
       noAvailableInstanceTypes,
       onScopeChange,
-      onFinish
+      onFinish,
+      onFinishFailed
     } = props;
     const intl = useIntl();
     const { getRuleMessage } = useAppUtils();
@@ -370,6 +372,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
         ]
       }));
       rawHandleOnFinishFailed({ ...errorInfo, errorFields });
+      onFinishFailed?.(errorInfo);
     };
     const detectMode = (volume?: FormData['spec']['volume']) => {
       if (volume?.persistent?.name || volume?.persistentTemplate?.name) {

src/pages/gpu-service/public-keys/components/add-public-key-modal.tsx

@@ -1,4 +1,5 @@
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { ModalFooter } from '@gpustack/core-ui';
 import { useRef } from 'react';
 import FormDrawer from '../../../_components/form-drawer';
@@ -23,9 +24,10 @@ const AddPublicKeyModal: React.FC<AddPublicKeyModalProps> = ({
   onCancel
 }) => {
   const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const handleCancel = () => {
@@ -34,7 +36,7 @@ const AddPublicKeyModal: React.FC<AddPublicKeyModalProps> = ({
   };
 
   const onFinish = async (values: FormData) => {
-    onOk({ ...values });
+    await run(() => onOk({ ...values }));
   };
 
   return (
@@ -48,6 +50,7 @@ const AddPublicKeyModal: React.FC<AddPublicKeyModalProps> = ({
         <ModalFooter
           onOk={handleSubmit}
           onCancel={handleCancel}
+          loading={loading}
           style={{
             padding: '16px 24px 8px',
             display: 'flex',
@@ -61,6 +64,7 @@ const AddPublicKeyModal: React.FC<AddPublicKeyModalProps> = ({
         action={action}
         currentData={data}
         onFinish={onFinish}
+        onFinishFailed={release}
         open={open}
       />
     </FormDrawer>

src/pages/gpu-service/public-keys/forms/index.tsx

@@ -11,11 +11,12 @@ interface PublicKeyFormProps {
   action: PageActionType;
   currentData?: ListItem | null;
   onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
 }
 
 const GPUServicePublicKeyForm: React.FC<PublicKeyFormProps> = forwardRef(
   (props, ref) => {
-    const { action, currentData, open, onFinish } = props;
+    const { action, currentData, open, onFinish, onFinishFailed } = props;
     const [form] = Form.useForm<FormData>();
 
     useEffect(() => {
@@ -50,6 +51,7 @@ const GPUServicePublicKeyForm: React.FC<PublicKeyFormProps> = forwardRef(
         name="gpuServicePublicKeyForm"
         form={form}
         onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
         preserve={false}
         initialValues={{}}
       >

src/pages/gpu-service/storage-types/components/add-storage-type-modal.tsx

@@ -1,4 +1,5 @@
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { ModalFooter } from '@gpustack/core-ui';
 import { useRef } from 'react';
 import FormDrawer from '../../../_components/form-drawer';
@@ -23,9 +24,10 @@ const AddStorageTypeModal: React.FC<AddStorageTypeModalProps> = ({
   onCancel
 }) => {
   const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const handleCancel = () => {
@@ -34,7 +36,7 @@ const AddStorageTypeModal: React.FC<AddStorageTypeModalProps> = ({
   };
 
   const onFinish = async (values: FormData) => {
-    onOk({ ...values });
+    await run(() => onOk({ ...values }));
   };
 
   return (
@@ -48,6 +50,7 @@ const AddStorageTypeModal: React.FC<AddStorageTypeModalProps> = ({
         <ModalFooter
           onOk={handleSubmit}
           onCancel={handleCancel}
+          loading={loading}
           style={{
             padding: '16px 24px 8px',
             display: 'flex',
@@ -61,6 +64,7 @@ const AddStorageTypeModal: React.FC<AddStorageTypeModalProps> = ({
         action={action}
         currentData={data}
         onFinish={onFinish}
+        onFinishFailed={release}
         open={open}
       />
     </FormDrawer>

src/pages/gpu-service/storage-types/forms/index.tsx

@@ -18,6 +18,7 @@ interface StorageTypeFormProps {
   action: PageActionType;
   currentData?: ListItem | null;
   onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
 }
 
 const detectKind = (item?: ListItem | null): StorageTypeKind => {
@@ -27,7 +28,7 @@ const detectKind = (item?: ListItem | null): StorageTypeKind => {
 
 const GPUServiceStorageTypeForm: React.FC<StorageTypeFormProps> = forwardRef(
   (props, ref) => {
-    const { action, currentData, open, onFinish } = props;
+    const { action, currentData, open, onFinish, onFinishFailed } = props;
     const [form] = Form.useForm<FormData>();
     const kind = Form.useWatch('type', form);
 
@@ -115,6 +116,7 @@ const GPUServiceStorageTypeForm: React.FC<StorageTypeFormProps> = forwardRef(
         name="gpuServiceStorageTypeForm"
         form={form}
         onFinish={handleFinish}
+        onFinishFailed={onFinishFailed}
         preserve={false}
         initialValues={{}}
       >

src/pages/gpu-service/storage/components/add-modal.tsx

@@ -1,4 +1,5 @@
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { ModalFooter } from '@gpustack/core-ui';
 import { useRef } from 'react';
 import FormDrawer from '../../../_components/form-drawer';
@@ -26,9 +27,10 @@ const AddModal: React.FC<AddModalProps> = ({
   storageClassList
 }) => {
   const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const handleCancel = () => {
@@ -37,9 +39,11 @@ const AddModal: React.FC<AddModalProps> = ({
   };
 
   const onFinish = async (values: FormData) => {
-    onOk({
+    await run(() =>
-      ...values
+      onOk({
-    });
+        ...values
+      })
+    );
   };
 
   return (
@@ -53,6 +57,7 @@ const AddModal: React.FC<AddModalProps> = ({
         <ModalFooter
           onOk={handleSubmit}
           onCancel={handleCancel}
+          loading={loading}
           style={{
             padding: '16px 24px 8px',
             display: 'flex',
@@ -67,6 +72,7 @@ const AddModal: React.FC<AddModalProps> = ({
           action={action}
           currentData={data}
           onFinish={onFinish}
+          onFinishFailed={release}
           open={open}
         />
       </FormContext.Provider>

src/pages/gpu-service/storage/forms/index.tsx

@@ -11,11 +11,12 @@ interface StorageFormProps {
   action: PageActionType;
   currentData?: ListItem | null;
   onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
 }
 
 const GPUServiceStorageForm: React.FC<StorageFormProps> = forwardRef(
   (props, ref) => {
-    const { action, currentData, open, onFinish } = props;
+    const { action, currentData, open, onFinish, onFinishFailed } = props;
     const [form] = Form.useForm<FormData>();
 
     useEffect(() => {
@@ -51,6 +52,7 @@ const GPUServiceStorageForm: React.FC<StorageFormProps> = forwardRef(
         name="gpuServiceStorageForm"
         form={form}
         onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
         preserve={false}
         initialValues={{}}
       >

src/pages/gpu-service/templates/components/add-modal.tsx

@@ -1,4 +1,5 @@
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { ModalFooter } from '@gpustack/core-ui';
 import { useRef } from 'react';
 import FormDrawer from '../../../_components/form-drawer';
@@ -23,9 +24,10 @@ const AddModal: React.FC<AddModalProps> = ({
   onCancel
 }) => {
   const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const handleCancel = () => {
@@ -34,9 +36,11 @@ const AddModal: React.FC<AddModalProps> = ({
   };
 
   const onFinish = async (values: FormData) => {
-    onOk({
+    await run(() =>
-      ...values
+      onOk({
-    });
+        ...values
+      })
+    );
   };
 
   return (
@@ -50,6 +54,7 @@ const AddModal: React.FC<AddModalProps> = ({
         <ModalFooter
           onOk={handleSubmit}
           onCancel={handleCancel}
+          loading={loading}
           style={{
             padding: '16px 24px 8px',
             display: 'flex',
@@ -63,6 +68,7 @@ const AddModal: React.FC<AddModalProps> = ({
         action={action}
         currentData={currentData}
         onFinish={onFinish}
+        onFinishFailed={release}
         open={open}
       />
     </FormDrawer>

src/pages/gpu-service/templates/forms/index.tsx

@@ -12,11 +12,12 @@ interface TemplateFormProps {
   action: PageActionType;
   currentData?: ListItem | null;
   onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
 }
 
 const GPUServiceTemplateForm: React.FC<TemplateFormProps> = forwardRef(
   (props, ref) => {
-    const { action, currentData, open, onFinish } = props;
+    const { action, currentData, open, onFinish, onFinishFailed } = props;
     const [form] = Form.useForm<FormData>();
 
     useEffect(() => {
@@ -58,6 +59,7 @@ const GPUServiceTemplateForm: React.FC<TemplateFormProps> = forwardRef(
         name="gpuServiceTemplateForm"
         form={form}
         onFinish={handleFinish}
+        onFinishFailed={onFinishFailed}
         preserve={false}
         scrollToFirstError
         initialValues={{

src/pages/maas-provider/components/add-provider-modal.tsx

@@ -1,4 +1,5 @@
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { FormDrawer } from '@gpustack/core-ui';
 import React, { useRef } from 'react';
 import { FormData, MaasProviderItem as ListItem } from '../config/types';
@@ -22,16 +23,19 @@ const AddProvider: React.FC<AddModalProps> = ({
   onCancel
 }) => {
   const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const handleOnFinish = async (data: FormData) => {
     console.log('handleOnFinish', data);
-    onOk({
+    await run(() =>
-      ...data
+      onOk({
-    });
+        ...data
+      })
+    );
   };
 
   const handleCancel = () => {
@@ -46,12 +50,14 @@ const AddProvider: React.FC<AddModalProps> = ({
       onCancel={handleCancel}
       onSubmit={handleSubmit}
       width={600}
+      loading={loading}
     >
       <ProviderForm
         ref={form}
         action={action}
         currentData={currentData}
         onFinish={handleOnFinish}
+        onFinishFailed={release}
       />
     </FormDrawer>
   );

src/pages/maas-provider/forms/index.tsx

@@ -31,6 +31,7 @@ interface ProviderFormProps {
   action: PageActionType;
   currentData?: ListItem; // Used when action is EDIT
   onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
 }
 
 const TABKeysMap = {
@@ -51,7 +52,7 @@ const requiredFields = {
 };
 
 const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
-  const { action, currentData, onFinish } = props;
+  const { action, currentData, onFinish, onFinishFailed } = props;
   const intl = useIntl();
   const providerRequiredFieldsMap = useProviderRequiredFields();
   const [form] = Form.useForm();
@@ -146,6 +147,11 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
     updateActiveKey
   });
 
+  const handleFinishFailed = (errorInfo: any) => {
+    handleOnFinishFailed(errorInfo);
+    onFinishFailed?.(errorInfo);
+  };
+
   useImperativeHandle(ref, () => ({
     submit: () => {
       form.submit();
@@ -217,7 +223,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
         <Form
           form={form}
           onFinish={handleOnFinish}
-          onFinishFailed={handleOnFinishFailed}
+          onFinishFailed={handleFinishFailed}
           initialValues={{
             proxy_enabled: false,
             proxy_url: '',

src/pages/model-routes/components/add-route-modal.tsx

@@ -1,4 +1,5 @@
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { AlertBlockInfo, FormDrawer, ModalFooter } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import React, { useRef } from 'react';
@@ -26,15 +27,18 @@ const AddProvider: React.FC<AddModalProps> = ({
   const intl = useIntl();
   const [isChanged, setIsChanged] = React.useState(false);
   const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const onFinish = async (data: FormData) => {
-    onOk({
+    await run(() =>
-      ...data
+      onOk({
-    });
+        ...data
+      })
+    );
   };
 
   const handleCancel = () => {
@@ -63,6 +67,7 @@ const AddProvider: React.FC<AddModalProps> = ({
           <ModalFooter
             onOk={handleSubmit}
             onCancel={onCancel}
+            loading={loading}
             styles={{
               wrapper: {
                 paddingTop: 16
@@ -78,6 +83,7 @@ const AddProvider: React.FC<AddModalProps> = ({
         realAction={realAction}
         currentData={currentData}
         onFinish={onFinish}
+        onFinishFailed={release}
         open={open}
         onFallbackChange={(changed: boolean) => {
           setIsChanged(changed);

src/pages/model-routes/forms/index.tsx

@@ -65,6 +65,7 @@ interface ProviderFormProps {
     routeTargets?: RouteTargetFormItem[];
   }; // Used when action is EDIT
   onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
   onFallbackChange?: (changed: boolean) => void;
 }
 
@@ -86,8 +87,15 @@ const requiredFields = {
 
 const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
   const intl = useIntl();
-  const { action, realAction, currentData, open, onFinish, onFallbackChange } =
+  const {
-    props;
+    action,
+    realAction,
+    currentData,
+    open,
+    onFinish,
+    onFinishFailed,
+    onFallbackChange
+  } = props;
   const { getScrollElementScrollableHeight } = useWrapperContext();
   const [form] = Form.useForm();
   const scrollTabsRef = useRef<any>(null);
@@ -238,6 +246,11 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
     updateActiveKey
   });
 
+  const handleFinishFailed = (errorInfo: any) => {
+    handleOnFinishFailed(errorInfo);
+    onFinishFailed?.(errorInfo);
+  };
+
   useImperativeHandle(ref, () => ({
     submit: () => {
       form.submit();
@@ -266,7 +279,7 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
         <Form
           form={form}
           onFinish={handleOnFinish}
-          onFinishFailed={handleOnFinishFailed}
+          onFinishFailed={handleFinishFailed}
           initialValues={{
             categories: [modelCategoriesMap.llm],
             meta: {}

src/pages/users/components/add-modal.tsx

@@ -1,5 +1,6 @@
 import { PageAction, PasswordReg } from '@/config';
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import {
   Input as CInput,
   FormDrawer,
@@ -32,6 +33,7 @@ const AddModal: React.FC<AddModalProps> = ({
   const { initialState } = useModel('@@initialState') || {};
   const [form] = Form.useForm();
   const intl = useIntl();
+  const { loading, guard, run, release } = useSubmitLock();
 
   const initFormValue = () => {
     if (action === PageAction.EDIT && open) {
@@ -49,7 +51,11 @@ const AddModal: React.FC<AddModalProps> = ({
   };
 
   const handleSubmit = () => {
-    form.submit();
+    guard(() => form.submit());
+  };
+
+  const onFinish = async (values: FormData) => {
+    await run(() => onOk(values));
   };
 
   useEffect(() => {
@@ -62,8 +68,15 @@ const AddModal: React.FC<AddModalProps> = ({
       open={open}
       onCancel={onCancel}
       onSubmit={handleSubmit}
+      loading={loading}
     >
-      <Form name="addUserForm" form={form} onFinish={onOk} preserve={false}>
+      <Form
+        name="addUserForm"
+        form={form}
+        onFinish={onFinish}
+        onFinishFailed={release}
+        preserve={false}
+      >
         <Form.Item<FormData>
           name="username"
           rules={[