[Fleet][Logs UI] Prevent double loading of entries in <LogStream />…

… component. (elastic#102980) (elastic#103269)

* Use better loading indicator for `useLogSource`

* Use clearer name for the loading entries flag

* Reuse query object if its value persists

Co-authored-by: Alejandro Fernández Gómez <alejandro.fernandez@elastic.co>

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}

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 {