[Discover] Fix lazy loading (opensearch-project#6041)

* adds callback ref to lazy loading sentinel
---------

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>

CHANGELOG.md

@@ -19,6 +19,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Discover] Fix table cell content overflowing in Safari ([#5948](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5948))
 - [BUG][MD]Fix schema for test connection to separate validation based on auth type ([#5997](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5997))
 - [Discover] Enable 'Back to Top' Feature in Discover for scrolling to top ([#6008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6008))
+- [Discover] Fix lazy loading of the legacy table from getting stuck ([#6041](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6041))
 - [BUG][MD]Expose picker using function in data source management plugin setup([#6030](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6030)) 
 
 ### 🚞 Infrastructure

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

@@ -5,7 +5,7 @@
 
 import './_doc_table.scss';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { EuiButtonEmpty, EuiCallOut, EuiProgress } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { TableHeader } from './table_header';
@@ -70,33 +70,34 @@ export const LegacyDiscoverTable = ({
     endRow: rows.length < pageSize ? rows.length : pageSize,
   });
   const observerRef = useRef<IntersectionObserver | null>(null);
-  const sentinelRef = useRef<HTMLDivElement | null>(null);
-
-  const loadMoreRows = () => {
-    setRenderedRowCount((prevRowCount) => prevRowCount + 50); // Load 50 more rows
-  };
+  const [sentinelEle, setSentinelEle] = useState<HTMLDivElement>();
+  // Need a callback ref since the element isnt set on the first render.
+  const sentinelRef = useCallback((node: HTMLDivElement | null) => {
+    if (node !== null) {
+      setSentinelEle(node);
+    }
+  }, []);
 
   useEffect(() => {
-    const sentinel = sentinelRef.current;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          loadMoreRows();
-        }
-      },
-      { threshold: 1.0 }
-    );
+    if (sentinelEle) {
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting) {
+            setRenderedRowCount((prevRowCount) => prevRowCount + 50); // Load 50 more rows
+          }
+        },
+        { threshold: 1.0 }
+      );
 
-    if (sentinelRef.current) {
-      observerRef.current.observe(sentinelRef.current);
+      observerRef.current.observe(sentinelEle);
     }
 
     return () => {
-      if (observerRef.current && sentinel) {
-        observerRef.current.unobserve(sentinel);
+      if (observerRef.current && sentinelEle) {
+        observerRef.current.unobserve(sentinelEle);
       }
     };
-  }, []);
+  }, [sentinelEle]);
 
   const [activePage, setActivePage] = useState(0);
   const pageCount = Math.ceil(rows.length / pageSize);