fix: ux issues

src/pages/gpu-service/instances/forms/storage-overlay.tsx

@@ -1,8 +1,10 @@
 import { PageAction } from '@/config';
 import FormOverlayView from '@/pages/_components/form-overlay-view';
+import { FormContext } from '@/pages/gpu-service/storage/config/form-context';
+import useQueryStorageClass from '@/pages/gpu-service/storage/services/use-query-storage-class';
 import { ModalFooter } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormData as StorageFormData } from '../../storage/config/types';
 import GPUServiceStorageForm from '../../storage/forms';
 
@@ -18,8 +20,17 @@ const StorageOverlay: React.FC<StorageOverlayProps> = ({
   onSubmit
 }) => {
   const intl = useIntl();
+  const { storageClassList, fetchData: fetchStorageClass } =
+    useQueryStorageClass();
+  const [loading, setLoading] = useState(false);
   const formRef = useRef<any>(null);
 
+  useEffect(() => {
+    if (open) {
+      fetchStorageClass({ page: -1 });
+    }
+  }, [open]);
+
   const handleSubmit = () => {
     formRef.current?.submit();
   };
@@ -30,7 +41,12 @@ const StorageOverlay: React.FC<StorageOverlayProps> = ({
   };
 
   const handleFinish = async (values: StorageFormData) => {
-    await onSubmit(values);
+    setLoading(true);
+    try {
+      await onSubmit(values);
+    } finally {
+      setLoading(false);
+    }
   };
 
   const getOverlayContainer = useCallback(() => {
@@ -52,6 +68,7 @@ const StorageOverlay: React.FC<StorageOverlayProps> = ({
         <ModalFooter
           onOk={handleSubmit}
           onCancel={handleCancel}
+          loading={loading}
           style={{
             padding: '16px 24px 24px',
             display: 'flex',
@@ -60,12 +77,14 @@ const StorageOverlay: React.FC<StorageOverlayProps> = ({
         />
       }
     >
-      <GPUServiceStorageForm
-        ref={formRef}
-        action={PageAction.CREATE}
-        open={open}
-        onFinish={handleFinish}
-      />
+      <FormContext.Provider value={{ storageClassList }}>
+        <GPUServiceStorageForm
+          ref={formRef}
+          action={PageAction.CREATE}
+          open={open}
+          onFinish={handleFinish}
+        />
+      </FormContext.Provider>
     </FormOverlayView>
   );
 };