fix loading state on watch list page + better handling for reloads

elastic · Jun 21, 2019 · fb232ee · fb232ee
1 parent 6367c2b
commit fb232ee
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 50 deletions.
diff --git a/x-pack/legacy/plugins/watcher/public/lib/use_request.ts b/x-pack/legacy/plugins/watcher/public/lib/use_request.ts
@@ -61,7 +61,7 @@ export const useRequest = ({
   // Tied to every render and bound to each request.
   let isOutdatedRequest = false;
 
-  const createRequest = async () => {
+  const createRequest = async (isInitialRequest = true) => {
     // Set a neutral state for a non-request.
     if (!path) {
       setError(null);
@@ -71,8 +71,12 @@ export const useRequest = ({
     }
 
     setError(null);
-    setData(initialData);
-    setIsLoading(true);
+
+    // Only set loading state to true and initial data on the first request
+    if (isInitialRequest) {
+      setIsLoading(true);
+      setData(initialData);
+    }
 
     const { data: responseData, error: responseError } = await sendRequest({
       path,
@@ -99,7 +103,8 @@ export const useRequest = ({
       createRequest();
 
       if (interval) {
-        const intervalRequest = setInterval(createRequest, interval);
+        const intervalRequest = setInterval(createRequest.bind(null, false), interval);
+
         return () => {
           cancelOutdatedRequest();
           clearInterval(intervalRequest);

diff --git a/...atcher/public/sections/watch_edit/components/threshold_watch_edit/watch_visualization.tsx b/...atcher/public/sections/watch_edit/components/threshold_watch_edit/watch_visualization.tsx
@@ -145,7 +145,7 @@ const WatchVisualizationUi = () => {
       if (isInitialRequest) {
         return setIsInitialRequest(false);
       }
-      reload();
+      reload(false);
     },
     [
       index,

diff --git a/x-pack/legacy/plugins/watcher/public/sections/watch_list/components/watch_list.tsx b/x-pack/legacy/plugins/watcher/public/sections/watch_list/components/watch_list.tsx
@@ -38,6 +38,7 @@ import {
   DeleteWatchesModal,
   WatchStatus,
   SectionError,
+  SectionLoading,
 } from '../../../components';
 import { loadWatches } from '../../../lib/api';
 import { watcherGettingStartedUrl } from '../../../lib/documentation_links';
@@ -157,6 +158,17 @@ const WatchListUi = () => {
     </EuiPopover>
   );
 
+  if (isWatchesLoading) {
+    return (
+      <SectionLoading>
+        <FormattedMessage
+          id="xpack.watcher.sections.watchList.loadingWatchesDescription"
+          defaultMessage="Loading watches…"
+        />
+      </SectionLoading>
+    );
+  }
+
   if (getPageErrorCode(error)) {
     return (
       <EuiPageContent>
@@ -399,7 +411,6 @@ const WatchListUi = () => {
         sorting={true}
         selection={selectionConfig}
         isSelectable={true}
-        loading={isWatchesLoading}
         message={
           <FormattedMessage
             id="xpack.watcher.sections.watchList.watchTable.noWatchesMessage"
@@ -417,55 +428,58 @@ const WatchListUi = () => {
     );
   }
 
-  return (
-    <EuiPageContent>
-      <DeleteWatchesModal
-        callback={(deleted?: string[]) => {
-          if (deleted) {
-            setDeletedWatches([...deletedWatches, ...watchesToDelete]);
-          }
-          setWatchesToDelete([]);
-        }}
-        watchesToDelete={watchesToDelete}
-      />
+  if (content) {
+    return (
+      <EuiPageContent>
+        <DeleteWatchesModal
+          callback={(deleted?: string[]) => {
+            if (deleted) {
+              setDeletedWatches([...deletedWatches, ...watchesToDelete]);
+            }
+            setWatchesToDelete([]);
+          }}
+          watchesToDelete={watchesToDelete}
+        />
 
-      <EuiTitle size="l">
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={true}>
-            <h1 data-test-subj="appTitle">
-              <FormattedMessage
-                id="xpack.watcher.sections.watchList.header"
-                defaultMessage="Watcher"
-              />
-            </h1>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              href={watcherGettingStartedUrl}
-              target="_blank"
-              iconType="help"
-              data-test-subj="documentationLink"
-            >
-              <FormattedMessage
-                id="xpack.watcher.sections.watchList.watcherGettingStartedDocsLinkText"
-                defaultMessage="Watcher docs"
-              />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiTitle>
+        <EuiTitle size="l">
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={true}>
+              <h1 data-test-subj="appTitle">
+                <FormattedMessage
+                  id="xpack.watcher.sections.watchList.header"
+                  defaultMessage="Watcher"
+                />
+              </h1>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                href={watcherGettingStartedUrl}
+                target="_blank"
+                iconType="help"
+                data-test-subj="documentationLink"
+              >
+                <FormattedMessage
+                  id="xpack.watcher.sections.watchList.watcherGettingStartedDocsLinkText"
+                  defaultMessage="Watcher docs"
+                />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiTitle>
 
-      <EuiSpacer size="s" />
+        <EuiSpacer size="s" />
 
-      <EuiText color="subdued">
-        <p>{watcherDescriptionText}</p>
-      </EuiText>
+        <EuiText color="subdued">
+          <p>{watcherDescriptionText}</p>
+        </EuiText>
 
-      <EuiSpacer size="xl" />
+        <EuiSpacer size="xl" />
 
-      {content}
-    </EuiPageContent>
-  );
+        {content}
+      </EuiPageContent>
+    );
+  }
+  return null;
 };
 
 export const WatchList = injectI18n(WatchListUi);