[SecuritySolution] Cleaning up some state & documentation in TGrid (#139377)

* chore: remove `isQueryLoading`

`isQueryLoading` is the same as `loading` so we can remove the extra state and effect

* chore: document `isFirstUpdate`

By reading the source code, it wasn't clear why `isFirstUpdate` is necessary. I added a comment that explains why it's there. Also moved the effect closer to its dependencies.

* chore: remove `isFirstUpdate` in favor of showFullLoading

`showFullLoading` is the non-effect equivalent of `isFirstUpdate`

* chore: update comment

* chore: remove unnecessary comment

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx

@@ -8,7 +8,7 @@
 import { AlertConsumers } from '@kbn/rule-data-utils';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { useDispatch } from 'react-redux';
 
@@ -181,7 +181,6 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
   const dispatch = useDispatch();
   const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
   const { uiSettings } = useKibana<CoreStart>().services;
-  const [isQueryLoading, setIsQueryLoading] = useState(true);
 
   const [tableView, setTableView] = useState<ViewSelection>('gridView');
   const getManageTimeline = useMemo(() => tGridSelectors.getManageTimelineById(), []);
@@ -189,10 +188,6 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
     getManageTimeline(state, id ?? '')
   );
 
-  useEffect(() => {
-    dispatch(tGridActions.updateIsLoading({ id, isLoading: isQueryLoading }));
-  }, [dispatch, id, isQueryLoading]);
-
   const justTitle = useMemo(() => <TitleText data-test-subj="title">{title}</TitleText>, [title]);
   const esQueryConfig = getEsQueryConfig(uiSettings);
 
@@ -257,6 +252,10 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
       startDate: start,
     });
 
+  useEffect(() => {
+    dispatch(tGridActions.updateIsLoading({ id, isLoading: loading }));
+  }, [dispatch, id, loading]);
+
   const totalCountMinusDeleted = useMemo(
     () => (totalCount > 0 ? totalCount - deletedEventIds.length : 0),
     [deletedEventIds.length, totalCount]
@@ -264,24 +263,20 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
 
   const hasAlerts = totalCountMinusDeleted > 0;
 
+  // Only show the table-spanning loading indicator when the query is loading and we
+  // don't have data (e.g. for the initial fetch).
+  // Subsequent fetches (e.g. for pagination) will show a small loading indicator on
+  // top of the table and the table will display the current page until the next page
+  // is fetched. This prevents a flicker when paginating.
+  const showFullLoading = loading && !hasAlerts;
+
   const nonDeletedEvents = useMemo(
     () => events.filter((e) => !deletedEventIds.includes(e._id)),
     [deletedEventIds, events]
   );
 
-  useEffect(() => {
-    setIsQueryLoading(loading);
-  }, [loading]);
-
   const alignItems = tableView === 'gridView' ? 'baseline' : 'center';
 
-  const isFirstUpdate = useRef(true);
-  useEffect(() => {
-    if (isFirstUpdate.current && !loading) {
-      isFirstUpdate.current = false;
-    }
-  }, [loading]);
-
   useEffect(() => {
     setQuery(inspect, loading, refetch);
   }, [inspect, loading, refetch, setQuery]);
@@ -307,7 +302,7 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
         data-test-subj="events-viewer-panel"
         $isFullScreen={globalFullScreen}
       >
-        {isFirstUpdate.current && <TGridLoading height="short" />}
+        {showFullLoading && <TGridLoading height="short" />}
 
         {graphOverlay}
 

x-pack/plugins/timelines/public/components/t_grid/standalone/index.tsx

@@ -6,7 +6,7 @@
  */
 import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
-import React, { useEffect, useMemo, useState, useRef } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { useDispatch } from 'react-redux';
 import { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
@@ -153,7 +153,6 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
   const dispatch = useDispatch();
   const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
   const { uiSettings } = useKibana<CoreStart>().services;
-  const [isQueryLoading, setIsQueryLoading] = useState(false);
   const [indexPatternsLoading, { browserFields, indexPatterns }] = useFetchIndex(indexNames);
 
   const getTGrid = useMemo(() => tGridSelectors.getTGridByIdSelector(), []);
@@ -165,10 +164,6 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
     title,
   } = useDeepEqualSelector((state) => getTGrid(state, STANDALONE_ID ?? ''));
 
-  useEffect(() => {
-    dispatch(tGridActions.updateIsLoading({ id: STANDALONE_ID, isLoading: isQueryLoading }));
-  }, [dispatch, isQueryLoading]);
-
   const justTitle = useMemo(() => <TitleText data-test-subj="title">{title}</TitleText>, [title]);
   const esQueryConfig = getEsQueryConfig(uiSettings);
 
@@ -241,6 +236,10 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
   });
   setRefetch(refetch);
 
+  useEffect(() => {
+    dispatch(tGridActions.updateIsLoading({ id: STANDALONE_ID, isLoading: loading }));
+  }, [dispatch, loading]);
+
   const { hasAlertsCrud, totalSelectAllAlerts } = useMemo(() => {
     return Object.entries(consumers).reduce<{
       hasAlertsCrud: boolean;
@@ -268,15 +267,18 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
   );
   const hasAlerts = totalCountMinusDeleted > 0;
 
+  // Only show the table-spanning loading indicator when the query is loading and we
+  // don't have data (e.g. for the initial fetch).
+  // Subsequent fetches (e.g. for pagination) will show a small loading indicator on
+  // top of the table and the table will display the current page until the next page
+  // is fetched. This prevents a flicker when paginating.
+  const showFullLoading = loading && !hasAlerts;
+
   const nonDeletedEvents = useMemo(
     () => events.filter((e) => !deletedEventIds.includes(e._id)),
     [deletedEventIds, events]
   );
 
-  useEffect(() => {
-    setIsQueryLoading(loading);
-  }, [loading]);
-
   useEffect(() => {
     dispatch(
       tGridActions.createTGrid({
@@ -306,12 +308,6 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const isFirstUpdate = useRef(true);
-  useEffect(() => {
-    if (isFirstUpdate.current && !loading) {
-      isFirstUpdate.current = false;
-    }
-  }, [loading]);
   const timelineContext = { timelineId: STANDALONE_ID };
 
   // Clear checkbox selection when new events are fetched
@@ -328,7 +324,7 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
   return (
     <InspectButtonContainer data-test-subj="events-viewer-panel">
       <AlertsTableWrapper>
-        {isFirstUpdate.current && <TGridLoading />}
+        {showFullLoading && <TGridLoading />}
         {canQueryTimeline ? (
           <TimelineContext.Provider value={timelineContext}>
             <EventsContainerLoading