[DataGridPro] Rework onRowsScrollEnd to use IntersectionObserver

packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts

@@ -8,6 +8,7 @@ import {
   GridRowMultiSelectionApi,
   GridColumnReorderApi,
   GridRowProApi,
+  GridInfiniteLoaderApi,
 } from '@mui/x-data-grid-pro';
 import { GridInitialStatePremium, GridStatePremium } from './gridStatePremium';
 import type { GridRowGroupingApi, GridExcelExportApi, GridAggregationApi } from '../hooks';
@@ -27,6 +28,7 @@ export interface GridApiPremium
     GridAggregationApi,
     GridRowPinningApi,
     GridCellSelectionApi,
+    GridInfiniteLoaderApi,
     // APIs that are private in Community plan, but public in Pro and Premium plans
     GridRowMultiSelectionApi,
     GridColumnReorderApi,

packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts

@@ -19,7 +19,7 @@ import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridPro
  */
 export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES: DataGridProPropsWithDefaultValue = {
   ...DATA_GRID_PROPS_DEFAULT_VALUES,
-  scrollEndThreshold: 80,
+  scrollEndThreshold: 1.0,
   treeData: false,
   defaultGroupingExpansionDepth: 0,
   disableColumnPinning: false,

packages/grid/x-data-grid-pro/src/hooks/features/index.ts

@@ -6,3 +6,4 @@ export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';
 export * from './rowPinning';
+export * from './infiniteLoader';

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/gridInfniteLoaderInterface.ts

@@ -0,0 +1,8 @@
+export interface GridInfiniteLoaderApi {
+  /**
+   * Handles the last visible row ref.
+   * @param {HTMLElement} node The HTML element that the ref is attatched to.
+   * @ignore - do not document. Remove before releasing v5 stable version.
+   */
+  unstable_lastVisibleRowRef: (node: HTMLElement) => void;
+}

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/index.ts

@@ -0,0 +1 @@
+export * from './gridInfniteLoaderInterface';

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts

@@ -1,17 +1,15 @@
 import * as React from 'react';
 import {
   useGridSelector,
-  GridEventListener,
-  GridScrollParams,
-  useGridApiEventHandler,
   useGridApiOptionHandler,
   gridVisibleColumnDefinitionsSelector,
-  gridRowsMetaSelector,
+  useGridApiMethod,
 } from '@mui/x-data-grid';
 import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 import { GridRowScrollEndParams } from '../../../models';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+import { GridInfiniteLoaderApi } from './gridInfniteLoaderInterface';
 
 /**
  * @requires useGridColumns (state)
@@ -27,57 +25,63 @@ export const useGridInfiniteLoader = (
 ): void => {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
-  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
+  const observer = React.useRef<IntersectionObserver>();
+  let previousY = 0;
+  let previousRatio = 0;
 
-  const isInScrollBottomArea = React.useRef<boolean>(false);
+  const handleLoadMoreRows = React.useCallback(
+    ([entry]: any) => {
+      const currentY = entry.boundingClientRect.y;
+      const currentRatio = entry.intersectionRatio;
+      const isIntersecting = entry.isIntersecting;
 
-  const handleRowsScrollEnd = React.useCallback(
-    (scrollPosition: GridScrollParams) => {
-      const dimensions = apiRef.current.getRootDimensions();
+      // Scrolling down check
+      if (currentY < previousY || isIntersecting) {
+        if (currentRatio > previousRatio) {
+          const viewportPageSize = apiRef.current.getViewportPageSize();
+          const rowScrollEndParam: GridRowScrollEndParams = {
+            visibleColumns,
+            viewportPageSize,
+            visibleRowsCount: currentPage.rows.length,
+          };
+          apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
+        }
+      }
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      previousY = currentY;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      previousRatio = currentRatio;
+    },
+    [apiRef, visibleColumns, currentPage.rows.length],
+  );
 
+  const lastVisibleRowRef = React.useCallback<GridInfiniteLoaderApi['unstable_lastVisibleRowRef']>(
+    (node) => {
       // Prevent the infite loading working in combination with lazy loading
-      if (!dimensions || props.rowsLoadingMode !== 'client') {
+      if (props.rowsLoadingMode !== 'client') {
         return;
       }
 
-      const scrollPositionBottom = scrollPosition.top + dimensions.viewportOuterSize.height;
-      const viewportPageSize = apiRef.current.getViewportPageSize();
-
-      if (scrollPositionBottom < contentHeight - props.scrollEndThreshold) {
-        isInScrollBottomArea.current = false;
+      if (observer.current) {
+        observer.current.disconnect();
       }
 
-      if (
-        scrollPositionBottom >= contentHeight - props.scrollEndThreshold &&
-        !isInScrollBottomArea.current
-      ) {
-        const rowScrollEndParam: GridRowScrollEndParams = {
-          visibleColumns,
-          viewportPageSize,
-          visibleRowsCount: currentPage.rows.length,
-        };
-        apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
-        isInScrollBottomArea.current = true;
+      observer.current = new IntersectionObserver(handleLoadMoreRows, {
+        threshold: props.scrollEndThreshold,
+      });
+
+      if (node) {
+        observer.current.observe(node);
       }
     },
-    [
-      contentHeight,
-      props.scrollEndThreshold,
-      props.rowsLoadingMode,
-      visibleColumns,
-      apiRef,
-      currentPage.rows.length,
-    ],
+    [props, handleLoadMoreRows],
   );
 
-  const handleGridScroll = React.useCallback<GridEventListener<'scrollPositionChange'>>(
-    ({ left, top }) => {
-      handleRowsScrollEnd({ left, top });
-    },
-    [handleRowsScrollEnd],
-  );
+  const infiteLoaderApi: GridInfiniteLoaderApi = {
+    unstable_lastVisibleRowRef: lastVisibleRowRef,
+  };
 
-  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleGridScroll);
+  useGridApiMethod(apiRef, infiteLoaderApi, 'public');
   useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };

packages/grid/x-data-grid-pro/src/models/gridApiPro.ts

@@ -11,6 +11,7 @@ import type {
   GridDetailPanelApi,
   GridRowPinningApi,
   GridDetailPanelPrivateApi,
+  GridInfiniteLoaderApi,
 } from '../hooks';
 
 /**
@@ -22,6 +23,7 @@ export interface GridApiPro
     GridColumnPinningApi,
     GridDetailPanelApi,
     GridRowPinningApi,
+    GridInfiniteLoaderApi,
     // APIs that are private in Community plan, but public in Pro and Premium plans
     GridRowMultiSelectionApi,
     GridColumnReorderApi,

packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx

@@ -329,14 +329,20 @@ describe('<DataGridPro /> - Events Params', () => {
     });
   });
 
-  it('publishing GRID_ROWS_SCROLL should call onRowsScrollEnd callback', () => {
+  it('publishing GRID_ROWS_SCROLL should call onRowsScrollEnd callback', function test() {
+    if (isJSDOM) {
+      this.skip(); // Needs layout
+    }
     const handleRowsScrollEnd = spy();
     render(<TestEvents onRowsScrollEnd={handleRowsScrollEnd} />);
     act(() => apiRef.current.publishEvent('scrollPositionChange', { left: 0, top: 3 * 52 }));
     expect(handleRowsScrollEnd.callCount).to.equal(1);
   });
 
-  it('publishing GRID_ROWS_SCROLL should call onFetchRows callback when rows lazy loading is enabled', () => {
+  it('publishing GRID_ROWS_SCROLL should call onFetchRows callback when rows lazy loading is enabled', function test() {
+    if (isJSDOM) {
+      this.skip(); // Needs layout
+    }
     const handleFetchRows = spy();
     render(
       <TestEvents

packages/grid/x-data-grid/src/components/GridRow.tsx

@@ -415,9 +415,17 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
       }
     : null;
 
+  const handleRowRef = (element: HTMLDivElement | null) => {
+    if (isLastVisible && (rootProps as any).onRowsScrollEnd) {
+      (apiRef as any).current.unstable_lastVisibleRowRef(element);
+    }
+
+    return handleRef && handleRef(element);
+  };
+
   return (
     <div
-      ref={handleRef}
+      ref={handleRowRef}
       data-id={rowId}
       data-rowindex={index}
       role="row"

scripts/x-data-grid-premium.exports.json

@@ -362,6 +362,7 @@
   { "name": "GridHeaderFilterMenuContainer", "kind": "Function" },
   { "name": "GridHeaderSelectionCheckboxParams", "kind": "Interface" },
   { "name": "GridIconSlotsComponent", "kind": "Interface" },
+  { "name": "GridInfiniteLoaderApi", "kind": "Interface" },
   { "name": "GridInitialState", "kind": "TypeAlias" },
   { "name": "GridInputRowSelectionModel", "kind": "TypeAlias" },
   { "name": "GridKeyboardArrowRight", "kind": "Variable" },

scripts/x-data-grid-pro.exports.json

@@ -326,6 +326,7 @@
   { "name": "GridHeaderFilterMenuContainer", "kind": "Function" },
   { "name": "GridHeaderSelectionCheckboxParams", "kind": "Interface" },
   { "name": "GridIconSlotsComponent", "kind": "Interface" },
+  { "name": "GridInfiniteLoaderApi", "kind": "Interface" },
   { "name": "GridInitialState", "kind": "TypeAlias" },
   { "name": "GridInputRowSelectionModel", "kind": "TypeAlias" },
   { "name": "GridKeyboardArrowRight", "kind": "Variable" },