rework how scrolling works after filtring or sorting

mui · Aug 25, 2022 · 88ea46f · 88ea46f
1 parent 79eb868
commit 88ea46f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts b/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts
@@ -134,33 +134,36 @@ export const useGridLazyLoader = (
         return;
       }
 
+      const fetchRowsParams: GridFetchRowsParams = {
+        firstRowToRender: params.firstRowToRender,
+        lastRowToRender: params.lastRowToRender,
+        sortModel,
+        filterModel,
+      };
+
       if (
         renderedRowsIntervalCache.current.firstRowToRender === params.firstRowToRender &&
-        renderedRowsIntervalCache.current.lastRowToRender === params.lastRowToRender &&
-        sortModel.length === 0 &&
-        filterModel.items.length === 0
+        renderedRowsIntervalCache.current.lastRowToRender === params.lastRowToRender
       ) {
         return;
       }
 
-      const skeletonRowsSection = findSkeletonRowsSection(visibleRows.rows, {
-        firstRowIndex: params.firstRowToRender,
-        lastRowIndex: params.lastRowToRender,
-      });
+      if (sortModel.length === 0 && filterModel.items.length === 0) {
+        const skeletonRowsSection = findSkeletonRowsSection(visibleRows.rows, {
+          firstRowIndex: params.firstRowToRender,
+          lastRowIndex: params.lastRowToRender,
+        });
 
-      if (!skeletonRowsSection) {
-        return;
+        if (!skeletonRowsSection) {
+          return;
+        }
+
+        fetchRowsParams.firstRowToRender = skeletonRowsSection.firstRowIndex;
+        fetchRowsParams.lastRowToRender = skeletonRowsSection.lastRowIndex;
       }
 
       renderedRowsIntervalCache.current = params;
 
-      const fetchRowsParams: GridFetchRowsParams = {
-        firstRowToRender: skeletonRowsSection.firstRowIndex,
-        lastRowToRender: skeletonRowsSection.lastRowIndex,
-        sortModel,
-        filterModel,
-      };
-
       apiRef.current.publishEvent('fetchRows', fetchRowsParams);
     },
     [apiRef, props.rowsLoadingMode, sortModel, filterModel, visibleRows.rows, lazyLoading],
@@ -169,7 +172,6 @@ export const useGridLazyLoader = (
   const handleGridSortModelChange = React.useCallback<GridEventListener<'sortModelChange'>>(
     (newSortModel) => {
       const dimensions = apiRef.current.getRootDimensions();
-
       if (
         isLazyLoadingDisabled({
           lazyLoadingFeatureFlag: lazyLoading,
@@ -180,6 +182,8 @@ export const useGridLazyLoader = (
         return;
       }
 
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+
       const { firstRowToRender, lastRowToRender } = getCurrentIntervalToRender();
       const fetchRowsParams: GridFetchRowsParams = {
         firstRowToRender,
@@ -207,6 +211,8 @@ export const useGridLazyLoader = (
         return;
       }
 
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+
       const { firstRowToRender, lastRowToRender } = getCurrentIntervalToRender();
       const fetchRowsParams: GridFetchRowsParams = {
         firstRowToRender,

diff --git a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx
@@ -76,9 +76,9 @@ describe('<DataGridPro /> - Lazy loader', () => {
     render(<TestLazyLoader onFetchRows={handleFetchRows} rowCount={50} />);
 
     expect(handleFetchRows.callCount).to.equal(1);
-    // Should be 2. When tested in the browser it's called only 2 time
+    // Should be 1. When tested in the browser it's called only 2 time
     fireEvent.click(getColumnHeaderCell(0));
-    expect(handleFetchRows.callCount).to.equal(3);
+    expect(handleFetchRows.callCount).to.equal(2);
   });
 
   it('should render skeleton cell if rowCount is bigger than the number of rows', function test() {