From e4d8cffaed34d3f4e504bc66ac29ee6a80b139a1 Mon Sep 17 00:00:00 2001
From: Bill McConaghy <bill.mcconaghy@elastic.co>
Date: Tue, 30 Apr 2019 09:09:29 -0400
Subject: [PATCH 1/2] adding loading spinner for watch visualization

---
 .../components/watch_visualization.tsx        | 57 ++++++++++++-------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_visualization.tsx b/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_visualization.tsx
index 2773a9677683e5..5b4be2321b6afd 100644
--- a/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_visualization.tsx
+++ b/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_visualization.tsx
@@ -20,12 +20,11 @@ import {
   ScaleType,
   Settings,
 } from '@elastic/charts';
-import { debounce } from 'lodash';
 import { TimeBuckets } from 'ui/time_buckets';
 import dateMath from '@elastic/datemath';
 import chrome from 'ui/chrome';
 import moment from 'moment-timezone';
-import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiLoadingSpinner } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { VisualizeOptions } from 'plugins/watcher/models/visualize_options';
 import { getWatchVisualizationData } from '../../../lib/api';
@@ -93,28 +92,32 @@ const getTimeBuckets = (watch: any) => {
   return timeBuckets;
 };
 
-const loadWatchVisualizationData = debounce(async (watch: any, setWatchVisualizationData: any) => {
-  const domain = getDomain(watch);
-  const timeBuckets = new TimeBuckets();
-  timeBuckets.setBounds(domain);
-  const interval = timeBuckets.getInterval().expression;
-  const visualizeOptions = new VisualizeOptions({
-    rangeFrom: domain.min,
-    rangeTo: domain.max,
-    interval,
-    timezone: getTimezone(),
-  });
-  const { visualizeData } = (await getWatchVisualizationData(watch, visualizeOptions)) as any;
-  setWatchVisualizationData(visualizeData || {});
-}, 500);
-
 const WatchVisualizationUi = () => {
   const { watch } = useContext(WatchContext);
   const [watchVisualizationData, setWatchVisualizationData] = useState<any>({});
-
+  const [isLoading, setIsLoading] = useState(false);
+  const loadWatchVisualizationData = async () => {
+    const domain = getDomain(watch);
+    const timeBuckets = new TimeBuckets();
+    timeBuckets.setBounds(domain);
+    const interval = timeBuckets.getInterval().expression;
+    const visualizeOptions = new VisualizeOptions({
+      rangeFrom: domain.min,
+      rangeTo: domain.max,
+      interval,
+      timezone: getTimezone(),
+    });
+    setIsLoading(true);
+    const { visualizeData } = (await getWatchVisualizationData(watch, visualizeOptions)) as any;
+    setIsLoading(false);
+    setWatchVisualizationData(visualizeData || {});
+  };
   useEffect(
     () => {
-      loadWatchVisualizationData(watch, setWatchVisualizationData);
+      const handler = setTimeout(loadWatchVisualizationData, 500);
+      return () => {
+        clearTimeout(handler);
+      };
     },
     [watch]
   );
@@ -137,8 +140,24 @@ const WatchVisualizationUi = () => {
     return customSeriesColors;
   };
 
+  if (isLoading) {
+    return (
+      <Fragment>
+        <EuiSpacer size="m" />
+        <EuiFlexGroup justifyContent="spaceAround">
+          <EuiFlexItem grow={false}>
+            <EuiLoadingSpinner size="xl" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiSpacer size="m" />
+      </Fragment>
+    );
+  }
+
   const domain = getDomain(watch);
   const watchVisualizationDataKeys = Object.keys(watchVisualizationData);
+
   return (
     <Fragment>
       <EuiSpacer size="m" />

From 942c71625bd0d82152510f39adfb61d5d525bf77 Mon Sep 17 00:00:00 2001
From: Bill McConaghy <bill.mcconaghy@elastic.co>
Date: Tue, 30 Apr 2019 09:59:00 -0400
Subject: [PATCH 2/2] responding to PR feedback

---
 .../sections/watch_edit/components/watch_visualization.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_visualization.tsx b/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_visualization.tsx
index 5b4be2321b6afd..5daab470254e3e 100644
--- a/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_visualization.tsx
+++ b/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_visualization.tsx
@@ -24,7 +24,7 @@ import { TimeBuckets } from 'ui/time_buckets';
 import dateMath from '@elastic/datemath';
 import chrome from 'ui/chrome';
 import moment from 'moment-timezone';
-import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { VisualizeOptions } from 'plugins/watcher/models/visualize_options';
 import { getWatchVisualizationData } from '../../../lib/api';
@@ -95,7 +95,7 @@ const getTimeBuckets = (watch: any) => {
 const WatchVisualizationUi = () => {
   const { watch } = useContext(WatchContext);
   const [watchVisualizationData, setWatchVisualizationData] = useState<any>({});
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const loadWatchVisualizationData = async () => {
     const domain = getDomain(watch);
     const timeBuckets = new TimeBuckets();
@@ -107,7 +107,6 @@ const WatchVisualizationUi = () => {
       interval,
       timezone: getTimezone(),
     });
-    setIsLoading(true);
     const { visualizeData } = (await getWatchVisualizationData(watch, visualizeOptions)) as any;
     setIsLoading(false);
     setWatchVisualizationData(visualizeData || {});
@@ -146,7 +145,7 @@ const WatchVisualizationUi = () => {
         <EuiSpacer size="m" />
         <EuiFlexGroup justifyContent="spaceAround">
           <EuiFlexItem grow={false}>
-            <EuiLoadingSpinner size="xl" />
+            <EuiLoadingChart size="xl" />
           </EuiFlexItem>
         </EuiFlexGroup>