🔥 deploy button loading (#767)

deploy button loading
cyclops-ui · Mar 1, 2025 · 03e09b4 · 03e09b4
2 parents d65cd3f + bb58205
commit 03e09b4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/cyclops-ui/src/components/shared/CreateModule/CreateModule.tsx b/cyclops-ui/src/components/shared/CreateModule/CreateModule.tsx
@@ -91,7 +91,6 @@ export const CreateModuleComponent = ({
   onSubmitModuleSuccess,
   onBackButton,
 }: CreateModuleProps) => {
-  const [loading, setLoading] = useState(false);
   const [config, setConfig] = useState({
     name: "",
     version: "",
@@ -122,6 +121,8 @@ export const CreateModuleComponent = ({
   const [loadingTemplateInitialValues, setLoadingTemplateInitialValues] =
     useState(false);
 
+  const [loadingSubmitCreate, setLoadingSubmitCreate] = useState(false);
+
   const [loadedValues, setLoadedValues] = useState("");
   const [loadingValuesModal, setLoadingValuesModal] = useState(false);
 
@@ -169,6 +170,8 @@ export const CreateModuleComponent = ({
   }, [initialValues, form]);
 
   const handleSubmit = (values: any) => {
+    setLoadingSubmitCreate(true);
+
     const moduleName = values["cyclops_module_name"];
     const moduleNamespace = values["cyclops_module_namespace"];
     const gitOpsWrite = gitopsToggle
@@ -197,8 +200,10 @@ export const CreateModuleComponent = ({
         onSubmitModuleSuccess(moduleName);
       })
       .catch((error) => {
-        setLoading(false);
         setError(mapResponseError(error));
+      })
+      .finally(() => {
+        setLoadingSubmitCreate(false);
       });
   };
 
@@ -697,9 +702,7 @@ export const CreateModuleComponent = ({
                 </Button>{" "}
                 <Button
                   type="primary"
-                  loading={
-                    loading || loadingTemplate || loadingTemplateInitialValues
-                  }
+                  loading={loadingSubmitCreate}
                   htmlType="submit"
                   name="Save"
                   disabled={

diff --git a/cyclops-ui/src/components/shared/EditModule/EditModule.tsx b/cyclops-ui/src/components/shared/EditModule/EditModule.tsx
@@ -114,6 +114,8 @@ export const EditModuleComponent = ({
     },
   });
 
+  const [loadingSubmitUpdate, setLoadingSubmitUpdate] = useState(false);
+
   const [advancedOptionsExpanded, setAdvancedOptionsExpanded] = useState(false);
   const [gitopsToggle, setGitopsToggle] = useState(false);
 
@@ -310,6 +312,8 @@ export const EditModuleComponent = ({
   }
 
   async function handleSubmit(values: any) {
+    setLoadingSubmitUpdate(true);
+
     if (isTemplateChanged) {
       values = findMaps(config.root.properties, values, initialValuesRaw);
     } else {
@@ -336,6 +340,9 @@ export const EditModuleComponent = ({
         })
         .catch((error) => {
           setError(mapResponseError(error));
+        })
+        .finally(() => {
+          setLoadingSubmitUpdate(false);
         });
     } catch (error) {
       onFinishFailed(error);
@@ -371,6 +378,7 @@ export const EditModuleComponent = ({
               (!isChanged && !isTemplateChanged && !isGitOpsChanged) ||
               !loadTemplate
             }
+            loading={loadingSubmitUpdate}
           >
             Deploy
           </Button>{" "}