Fix row rendering in infinite scroll

src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx

@@ -5,7 +5,7 @@
 
 import './_doc_table.scss';
 
-import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useMemo, useRef, useState, useCallback, SetStateAction } from 'react';
 import { EuiSmallButtonEmpty, EuiCallOut, EuiProgress } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { TableHeader } from './table_header';
@@ -41,6 +41,8 @@
 // ToDo: These would need to be read from an upcoming config panel
 const PAGINATED_PAGE_SIZE = 50;
 const INFINITE_SCROLLED_PAGE_SIZE = 10;
+// How far to queue unrendered rows ahead of time during infinite scrolling
+const DESIRED_ROWS_LOOKAHEAD = 5 * INFINITE_SCROLLED_PAGE_SIZE;
 
 const DefaultDiscoverTableUI = ({
   columns,
@@ -86,7 +88,7 @@
    */
   const [renderedRowCount, setRenderedRowCount] = useState(INFINITE_SCROLLED_PAGE_SIZE);
   const [desiredRowCount, setDesiredRowCount] = useState(
-    Math.min(rows.length, 5 * INFINITE_SCROLLED_PAGE_SIZE)
+    Math.min(rows.length, DESIRED_ROWS_LOOKAHEAD)
   );
   const [displayedRows, setDisplayedRows] = useState(rows.slice(0, PAGINATED_PAGE_SIZE));
   const [currentRowCounts, setCurrentRowCounts] = useState({
@@ -118,7 +120,7 @@
           if (entries[0].isIntersecting) {
             // Load another batch of rows, some immediately and some lazily
             setRenderedRowCount((prevRowCount) => prevRowCount + INFINITE_SCROLLED_PAGE_SIZE);
-            setDesiredRowCount((prevRowCount) => prevRowCount + 5 * INFINITE_SCROLLED_PAGE_SIZE);
+            setDesiredRowCount((prevRowCount) => prevRowCount + DESIRED_ROWS_LOOKAHEAD);
           }
         },
         { threshold: 1.0 }
@@ -155,6 +157,10 @@
   const lazyLoadRequestFrameRef = useRef<number>(0);
   const lazyLoadLastTimeRef = useRef<number>(0);
 
+  // When doing infinite scrolling, the `rows` prop gets regularly updated from the outside: we only
+  // render the additional rows when we know the load isn't too high. To prevent overloading the
+  // renderer, we throttle by current framerate and only render if the frames are fast enough, then
+  // we increase the rendered row count and trigger a re-render.
   React.useEffect(() => {
     if (!showPagination) {
       const loadMoreRows = (time: number) => {
@@ -166,12 +172,17 @@
           lazyLoadLastTimeRef.current = time;
           lazyLoadRequestFrameRef.current = requestAnimationFrame(loadMoreRows);
         }
+        // Ensure we have more desired rows in the queue to prevent stalling when we render the
+        // current desired row count
+        if (renderedRowCount + DESIRED_ROWS_LOOKAHEAD > desiredRowCount) {
+          setDesiredRowCount(Math.min(renderedRowCount + DESIRED_ROWS_LOOKAHEAD, rows.length));
+        }
       };
       lazyLoadRequestFrameRef.current = requestAnimationFrame(loadMoreRows);
     }
 
     return () => cancelAnimationFrame(lazyLoadRequestFrameRef.current);
-  }, [showPagination, renderedRowCount, desiredRowCount]);
+  }, [showPagination, renderedRowCount, desiredRowCount, rows.length]);
 
   // Allow auto column-sizing using the initially rendered rows and then convert to fixed
   const tableLayoutRequestFrameRef = useRef<number>(0);
@@ -254,7 +265,7 @@
         </table>
         {!showPagination && renderedRowCount < rows.length && (
           <div ref={sentinelRef}>
-            <EuiProgress size="xs" color="accent" />
+            <EuiProgress size="xs" color="accent" data-test-subj="discoverRenderedRowsProgress" />
           </div>
         )}
         {!showPagination && rows.length === sampleSize && (