Add spinner for environments button

elastic · Jul 9, 2020 · fa78f82 · fa78f82
1 parent 4124e70
commit fa78f82
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/add_environments.tsx b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/add_environments.tsx
@@ -50,6 +50,8 @@ export const AddEnvironments = ({
     disabled: currentEnvironments.includes(env),
   }));
 
+  const [isSaving, setIsSaving] = useState(false);
+
   const [selectedOptions, setSelected] = useState<
     Array<EuiComboBoxOptionOption<string>>
   >([]);
@@ -127,9 +129,12 @@ export const AddEnvironments = ({
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButton
+            isLoading={isSaving}
+            isDisabled={isSaving || selectedOptions.length === 0}
             fill
-            disabled={selectedOptions.length === 0}
             onClick={async () => {
+              setIsSaving(true);
+
               const selectedEnvironments = selectedOptions.map(
                 ({ value }) => value as string
               );
@@ -140,6 +145,7 @@ export const AddEnvironments = ({
               if (success) {
                 onCreateJobSuccess();
               }
+              setIsSaving(false);
             }}
           >
             {i18n.translate(