From 60d53115396026cc719daa6b80bbd1544f617093 Mon Sep 17 00:00:00 2001
From: Abdul Zahid <awahab07@yahoo.com>
Date: Tue, 28 Dec 2021 04:02:16 +0100
Subject: [PATCH] Added progress bar when Enabled switch is busy.

https://github.com/elastic/uptime/issues/415
---
 .../monitor_list/monitor_enabled.tsx          | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_enabled.tsx b/x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_enabled.tsx
index 9eec7c9db3f9e..4b3aba5d6a3ab 100644
--- a/x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_enabled.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_enabled.tsx
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import { EuiSwitch } from '@elastic/eui';
-import { EuiSwitchEvent } from '@elastic/eui/src/components/form/switch/switch';
+import { EuiSwitch, EuiProgress, EuiSwitchEvent } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useState } from 'react';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
@@ -66,15 +65,24 @@ export const MonitorEnabled = ({ id, monitor, setRefresh }: Props) => {
   };
 
   return (
-    <EuiSwitch
-      checked={enabled}
-      disabled={isLoading}
-      showLabel={false}
-      label={enabled ? DISABLE_MONITOR_LABEL : ENABLE_MONITOR_LABEL}
-      title={enabled ? DISABLE_MONITOR_LABEL : ENABLE_MONITOR_LABEL}
-      data-test-subj="syntheticsIsMonitorEnabled"
-      onChange={handleEnabledChange}
-    />
+    <div css={{ position: 'relative' }} aria-busy={isLoading}>
+      <EuiSwitch
+        checked={enabled}
+        disabled={isLoading}
+        showLabel={false}
+        label={enabled ? DISABLE_MONITOR_LABEL : ENABLE_MONITOR_LABEL}
+        title={enabled ? DISABLE_MONITOR_LABEL : ENABLE_MONITOR_LABEL}
+        data-test-subj="syntheticsIsMonitorEnabled"
+        onChange={handleEnabledChange}
+      />
+      {isLoading ? (
+        <EuiProgress
+          css={{ position: 'absolute', left: 0, bottom: -4, width: '100%', height: 2 }}
+          size="xs"
+          color="primary"
+        />
+      ) : null}
+    </div>
   );
 };