Table optimization with lazy loading

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

@@ -5,7 +5,7 @@
 
 import './_doc_table.scss';
 
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { EuiDataGridColumn, EuiDataGridSorting } from '@elastic/eui';
 import { TableHeader } from './table_header';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
@@ -42,9 +42,38 @@ export const LegacyDiscoverTable = ({
   onFilter,
   onClose,
 }: DefaultDiscoverTableProps) => {
+  const [intersectingRows, setIntersectingRows] = useState([]);
+  const tableRef = useRef(null);
+
+  useEffect(() => {
+    const options = {
+      root: null, // viewport
+      rootMargin: '0px',
+      threshold: 0.5, // 50% of the element is visible
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      const visibleRows = entries
+        .filter((entry) => entry.isIntersecting)
+        .map((entry) => Number(entry.target.dataset.index));
+
+      setIntersectingRows((prevIntersectingRows) => [...prevIntersectingRows, ...visibleRows]);
+    }, options);
+
+    const tableRows = tableRef.current.querySelectorAll('tbody tr');
+    tableRows.forEach((row, index) => {
+      observer.observe(row);
+      row.dataset.index = index; // Storing the index for reference
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [rows, columns]); // Re-run if the data changes
+
   return (
     indexPattern && (
-      <table data-test-subj="docTable" className="osd-table table">
+      <table data-test-subj="docTable" className="osd-table table" ref={tableRef}>
         <thead>
           <TableHeader
             displayedTableColumns={displayedTableColumns}
@@ -59,10 +88,10 @@ export const LegacyDiscoverTable = ({
           />
         </thead>
         <tbody>
-          {rows.map((row: OpenSearchSearchHit) => {
+          {rows.map((row: OpenSearchSearchHit, index: number) => {
             return (
               <TableRow
-                key={row._id}
+                opacity={intersectingRows.includes(index) ? 1 : 0}
                 row={row}
                 columnIds={displayedTableColumns.map((column) => column.id)}
                 columns={columns}

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

@@ -14,7 +14,6 @@ import './_table_header.scss';
 import React from 'react';
 import { EuiDataGridColumn, EuiDataGridSorting } from '@elastic/eui';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
-import { SortOrder, getDefaultSort } from '../../view_components/utils/get_default_sort';
 import { TableHeaderColumn } from './table_header_column';
 
 interface Props {
@@ -65,7 +64,6 @@ export function TableHeader({
 
           return (
             <TableHeaderColumn
-              key={col.id + idx}
               currentIdx={idx}
               colLeftIdx={colLeftIdx}
               colRightIdx={colRightIdx}

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

@@ -20,6 +20,7 @@
 import { fetchSourceTypeDataCell } from '../data_grid/data_grid_table_cell_value';
 
 export interface TableRowProps {
+  opacity: number;
   row: OpenSearchSearchHit;
   columnIds: string[];
   columns: string[];
@@ -31,6 +32,7 @@
 }
 
 export const TableRow = ({
+  opacity,
   row,
   columnIds,
   columns,
@@ -43,7 +45,7 @@
   const flattened = indexPattern.flattenHit(row);
   const [isExpanded, setIsExpanded] = useState(false);
   const tableRow = (
-    <tr>
+    <tr style={{ opacity }}>
       <td data-test-subj="docTableExpandToggleColumn" className="osdDocTableCell__toggleDetails">
         <EuiButtonIcon
           color="text"
@@ -94,19 +96,18 @@
 
         if (!fieldInfo?.filterable) {
           return (
             // eslint-disable-next-line react/no-danger
             <td
               data-test-subj="docTableField"
               className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
             >
               <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
             </td>
           );
         }
 
         return (
           <TableCell
-            key={row._id + columnId}
             columnId={columnId}
             onFilter={onFilter}
             fieldMapping={fieldMapping}