From 1ef5a6aa05e9b4bd0fb96809b979877e7081f654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Thu, 24 Jun 2021 15:06:07 +0200
Subject: [PATCH] [Fleet][Logs UI] Prevent double loading of entries in
 `<LogStream />` component. (#102980)

* Use better loading indicator for `useLogSource`

* Use clearer name for the loading entries flag

* Reuse query object if its value persists
---
 .../public/components/log_stream/log_stream.tsx     |  6 +++---
 .../public/containers/logs/log_stream/index.ts      | 13 ++++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx b/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx
index 0087d559a42e..ff9b749911c8 100644
--- a/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx
+++ b/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx
@@ -112,7 +112,7 @@ Read more at https://github.com/elastic/kibana/blob/master/src/plugins/kibana_re
 
   const {
     derivedIndexPattern,
-    isLoadingSourceConfiguration,
+    isLoading: isLoadingSource,
     loadSource,
     sourceConfiguration,
   } = useLogSource({
@@ -138,7 +138,7 @@ Read more at https://github.com/elastic/kibana/blob/master/src/plugins/kibana_re
     hasMoreAfter,
     hasMoreBefore,
     isLoadingMore,
-    isReloading,
+    isReloading: isLoadingEntries,
   } = useLogStream({
     sourceId,
     startTimestamp,
@@ -198,7 +198,7 @@ Read more at https://github.com/elastic/kibana/blob/master/src/plugins/kibana_re
       items={streamItems}
       scale="medium"
       wrap={true}
-      isReloading={isLoadingSourceConfiguration || isReloading}
+      isReloading={isLoadingSource || isLoadingEntries}
       isLoadingMore={isLoadingMore}
       hasMoreBeforeStart={hasMoreBefore}
       hasMoreAfterEnd={hasMoreAfter}
diff --git a/x-pack/plugins/infra/public/containers/logs/log_stream/index.ts b/x-pack/plugins/infra/public/containers/logs/log_stream/index.ts
index 021aa8f79fe5..4cdeb678c432 100644
--- a/x-pack/plugins/infra/public/containers/logs/log_stream/index.ts
+++ b/x-pack/plugins/infra/public/containers/logs/log_stream/index.ts
@@ -5,8 +5,9 @@
  * 2.0.
  */
 
+import { isEqual } from 'lodash';
 import createContainer from 'constate';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import usePrevious from 'react-use/lib/usePrevious';
 import useSetState from 'react-use/lib/useSetState';
 import { esQuery } from '../../../../../../../src/plugins/data/public';
@@ -65,6 +66,12 @@ export function useLogStream({
   const prevStartTimestamp = usePrevious(startTimestamp);
   const prevEndTimestamp = usePrevious(endTimestamp);
 
+  const cachedQuery = useRef(query);
+
+  if (!isEqual(query, cachedQuery)) {
+    cachedQuery.current = query;
+  }
+
   useEffect(() => {
     if (prevStartTimestamp && prevStartTimestamp > startTimestamp) {
       setState({ hasMoreBefore: true });
@@ -82,10 +89,10 @@ export function useLogStream({
       sourceId,
       startTimestamp,
       endTimestamp,
-      query,
+      query: cachedQuery.current,
       columnOverrides: columns,
     }),
-    [columns, endTimestamp, query, sourceId, startTimestamp]
+    [columns, endTimestamp, cachedQuery, sourceId, startTimestamp]
   );
 
   const {