[Alerting UI] Added visual indicator when enable switched click is processed on the server side.

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_enabled_switch.tsx

@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import { asyncScheduler } from 'rxjs';
-import React, { useEffect, useState } from 'react';
-import { EuiSwitch } from '@elastic/eui';
+import React, { useState } from 'react';
+import { EuiSwitch, EuiLoadingSpinner } from '@elastic/eui';
 
 import { Alert, AlertTableItem } from '../../../../types';
 
@@ -24,31 +23,32 @@ export const RuleEnabledSwitch: React.FunctionComponent<ComponentOpts> = ({
   disableAlert,
   enableAlert,
 }: ComponentOpts) => {
-  const [isEnabled, setIsEnabled] = useState<boolean>(!item.enabled);
-  useEffect(() => {
-    setIsEnabled(item.enabled);
-  }, [item.enabled]);
+  const [isEnabled, setIsEnabled] = useState<boolean>(item.enabled);
+  const [isUpdating, setIsUpdating] = useState<boolean>(false);
 
-  return (
+  const res = isUpdating ? (
+    <EuiLoadingSpinner size="m" />
+  ) : (
     <EuiSwitch
       name="enable"
       disabled={!item.isEditable || !item.enabledInLicense}
       compressed
       checked={isEnabled}
       data-test-subj="enableSwitch"
       onChange={async () => {
-        const enabled = isEnabled;
-        asyncScheduler.schedule(async () => {
-          if (enabled) {
-            await disableAlert({ ...item, enabled });
-          } else {
-            await enableAlert({ ...item, enabled });
-          }
-          onAlertChanged();
-        }, 10);
+        setIsUpdating(true);
+        const enabled = item.enabled;
+        if (enabled) {
+          await disableAlert({ ...item, enabled });
+        } else {
+          await enableAlert({ ...item, enabled });
+        }
         setIsEnabled(!isEnabled);
+        setIsUpdating(false);
+        onAlertChanged();
       }}
       label=""
     />
   );
+  return res;
 };