fix: Add loading indicator when creating HP search (#9774)

determined-ai · Aug 5, 2024 · 7b4f01c · 7b4f01c
1 parent a4d74af
commit 7b4f01c
Showing 1 changed file with 20 additions and 3 deletions.
diff --git a/webui/react/src/components/HyperparameterSearchModal.tsx b/webui/react/src/components/HyperparameterSearchModal.tsx
@@ -108,6 +108,7 @@ const HyperparameterSearchModal = ({ closeModal, experiment, trial }: Props): JS
   const [form] = Form.useForm();
   const [currentPage, setCurrentPage] = useState(0);
   const [validationError, setValidationError] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const formValues = Form.useWatch([], form);
   const f_flat_runs = useFeature().isOn('flat_runs');
 
@@ -136,6 +137,7 @@ const HyperparameterSearchModal = ({ closeModal, experiment, trial }: Props): JS
   );
 
   const submitExperiment = useCallback(async () => {
+    if (isSubmitting) return;
     const fields: Record<string, Primitive | HyperparameterRowValues> = form.getFieldsValue(true);
 
     // Deep cloning parent experiment's config
@@ -217,6 +219,7 @@ const HyperparameterSearchModal = ({ closeModal, experiment, trial }: Props): JS
     const newConfig = yaml.dump(baseConfig);
 
     try {
+      setIsSubmitting(true);
       const { experiment: newExperiment, warnings } = await createExperiment(
         {
           activate: true,
@@ -253,8 +256,18 @@ const HyperparameterSearchModal = ({ closeModal, experiment, trial }: Props): JS
 
       // We throw an error to prevent the modal from closing.
       throw new DetError(errorMessage, { publicMessage: errorMessage, silent: true });
+    } finally {
+      setIsSubmitting(false);
     }
-  }, [entityCopy, experiment.configRaw, experiment.id, experiment.projectId, form, currentHPs]);
+  }, [
+    entityCopy,
+    experiment.configRaw,
+    experiment.id,
+    experiment.projectId,
+    form,
+    currentHPs,
+    isSubmitting,
+  ]);
 
   const handleOk = useCallback(() => {
     if (currentPage === 0) {
@@ -626,15 +639,19 @@ const HyperparameterSearchModal = ({ closeModal, experiment, trial }: Props): JS
         <div className={css.spacer} />
         <Row>
           <Button onClick={handleCancel}>Cancel</Button>
-          <Button disabled={validationError} type="primary" onClick={handleOk}>
+          <Button
+            disabled={validationError}
+            loading={isSubmitting}
+            type="primary"
+            onClick={handleOk}>
             {currentPage === 0
               ? 'Select Hyperparameters'
               : `Run ${capitalize(entityCopy.experiment)}`}
           </Button>
         </Row>
       </>
     );
-  }, [currentPage, entityCopy, handleBack, handleCancel, handleOk, validationError]);
+  }, [currentPage, entityCopy, handleBack, handleCancel, handleOk, validationError, isSubmitting]);
 
   return (
     <Modal footer={footer} title="Hyperparameter Search">