debounce navigate to start after sort/filter change

Author: arminmeh

packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts

@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
+import debounce from '@mui/utils/debounce';
 import { RefObject } from '@mui/x-internals/types';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
-import { runIf } from '../../../utils/utils';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPaginationModelApi, GridPaginationState } from './gridPaginationInterfaces';
@@ -277,6 +277,11 @@ export const useGridPaginationModel = (
     }
   }, [apiRef]);
 
+  const debouncedNavigateToStart = React.useMemo(
+    () => debounce(navigateToStart, 0),
+    [navigateToStart],
+  );
+
   /**
    * Resets the page only if the active items or quick filter has changed from the last time.
    * This is to avoid resetting the page when the filter model is changed
@@ -296,16 +301,16 @@ export const useGridPaginationModel = (
       }
 
       previousFilterModel.current = currentActiveFilters;
-      navigateToStart();
+      debouncedNavigateToStart();
     },
-    [apiRef, navigateToStart],
+    [apiRef, debouncedNavigateToStart],
   );
 
   useGridEvent(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   useGridEvent(apiRef, 'paginationModelChange', handlePaginationModelChange);
   useGridEvent(apiRef, 'rowCountChange', handleRowCountChange);
-  useGridEvent(apiRef, 'sortModelChange', runIf(!props.paginationModel, navigateToStart));
-  useGridEvent(apiRef, 'filterModelChange', runIf(!props.paginationModel, handleFilterModelChange));
+  useGridEvent(apiRef, 'sortModelChange', debouncedNavigateToStart);
+  useGridEvent(apiRef, 'filterModelChange', handleFilterModelChange);
 
   /**
    * EFFECTS