Skip to content

refactor(grid): Removed scroll throttle for grid scrolls #16871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rkaraivanov wants to merge 2 commits into
base: master
Choose a base branch
from
Open

refactor(grid): Removed scroll throttle for grid scrolls #16871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a3f7856
refactor(grid): Removed scroll throttle for grid scrolls
rkaraivanov Feb 5, 2026
ff6cb57
Merge branch 'master' into rkaraivanov/remove-throttle-for-grid-scrolls
ChronosSF Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions projects/igniteui-angular/grids/grid/src/grid-base.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import {
ViewContainerRef,
DOCUMENT,
inject,
InjectionToken
} from '@angular/core';
import {
areEqualArrays,
Expand Down Expand Up @@ -112,15 +111,6 @@ import { CharSeparatedValueData, DropPosition, FilterMode, getUUID, GridCellMerg
import { getCurrentI18n, getNumberFormatter, IResourceChangeEventArgs, } from 'igniteui-i18n-core';
import { I18N_FORMATTER } from 'igniteui-angular/core';

/**
* Injection token for setting the throttle time used in grid virtual scroll.
* @hidden
*/
export const SCROLL_THROTTLE_TIME = /*@__PURE__*/new InjectionToken<number>('SCROLL_THROTTLE_TIME', {
factory: () => 40
});


interface IMatchInfoCache {
row: any;
Comment on lines 112 to 115
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing the exported SCROLL_THROTTLE_TIME token is a breaking change for any consumers (including internal tooling) that configured grid scroll behavior via DI. Consider keeping the token for backwards compatibility (e.g., deprecated), or reintroducing an equivalent public/hidden configuration point so existing DI configurations don’t hard-break at compile time.

Copilot uses AI. Check for mistakes.
index: number;
Expand Down Expand Up @@ -177,7 +167,6 @@ export abstract class IgxGridBaseDirective implements GridType,
protected _diTransactions = inject(IgxGridTransaction, { optional: true });
/** @hidden @internal */
public i18nFormatter = inject(I18N_FORMATTER);
private readonly THROTTLE_TIME = inject(SCROLL_THROTTLE_TIME);

/**
* Gets/Sets the display time for the row adding snackbar notification.
Expand Down Expand Up @@ -3731,7 +3720,6 @@ export abstract class IgxGridBaseDirective implements GridType,

this.scrollNotify.pipe(
filter(() => !this._init),
throttleTime(this.THROTTLE_TIME, animationFrameScheduler, { leading: false, trailing: true }),
destructor
)
.subscribe((event) => {
Comment on lines 3721 to 3725
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With throttleTime(...) removed, scrollNotify will now emit on every scroll event, which can be extremely high-frequency and may significantly increase work during scrolling (virtualization, change detection, DOM measurements, etc.). If the goal is to remove the fixed delay but still prevent event floods, consider coalescing emissions to animation frames (e.g., scheduling/coalescing on animationFrameScheduler via an operator like auditTime(0, animationFrameScheduler) or similar) so behavior remains responsive without regressing scroll performance.

Copilot uses AI. Check for mistakes.
Expand Down
4 changes: 0 additions & 4 deletions projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxGridComponent } from './public_api';
import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive';
import {
SelectionWithScrollsComponent,
SelectionWithTransactionsComponent,
Expand Down Expand Up @@ -979,9 +978,6 @@ describe('IgxGrid - Cell selection #grid', () => {
let gridContent: DebugElement;

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
fix = TestBed.createComponent(SelectionWithScrollsComponent);
fix.detectChanges();
grid = fix.componentInstance.grid;
Expand Down
4 changes: 0 additions & 4 deletions projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { DebugElement, QueryList } from '@angular/core';
import { IgxGridGroupByRowComponent } from './groupby-row.component';
import { CellType } from 'igniteui-angular/grids/core';
import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core';
import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive';

const DEBOUNCETIME = 100;

Expand Down Expand Up @@ -223,9 +222,6 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
}));

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
fix = TestBed.createComponent(VirtualGridComponent);
fix.detectChanges();
grid = fix.componentInstance.grid;
Expand Down
4 changes: 0 additions & 4 deletions projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { GridFunctions, GRID_MRL_BLOCK } from '../../../test-utils/grid-function
import { CellType, IGridCellEventArgs, IgxColumnComponent, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core';
import { IgxColumnLayoutComponent } from 'igniteui-angular/grids/core';
import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core';
import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive';

const DEBOUNCE_TIME = 60;
const CELL_CSS_CLASS = '.igx-grid__td';
Expand All @@ -29,9 +28,6 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
}));

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
fix = TestBed.createComponent(ColumnLayoutTestComponent);
});

Expand Down
7 changes: 0 additions & 7 deletions projects/igniteui-angular/grids/grid/src/grid.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { AsyncPipe } from '@angular/common';
import { setElementSize, ymd } from '../../../test-utils/helper-utils.spec';
import { FilteringExpressionsTree, FilteringLogic, getComponentSize, GridColumnDataType, IgxNumberFilteringOperand, IgxStringFilteringOperand, ISortingExpression, ɵSize, SortingDirection } from 'igniteui-angular/core';
import { IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator';
import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive';

describe('IgxGrid Component Tests #grid', () => {
const MIN_COL_WIDTH = '136px';
Expand All @@ -42,12 +41,6 @@ describe('IgxGrid Component Tests #grid', () => {
.compileComponents();
}));

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
});

it('should initialize a grid with columns from markup', () => {
const fix = TestBed.createComponent(IgxGridMarkupDeclarationComponent);
fix.detectChanges();
Expand Down
7 changes: 0 additions & 7 deletions projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { GridSummaryCalculationMode, IgxStringFilteringOperand, SortingDirection
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group';
import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive';

const DEBOUNCE_TIME = 60;
const ROW_TAG = 'igx-grid-row';
Expand Down Expand Up @@ -44,12 +43,6 @@ describe('IgxGrid Master Detail #grid', () => {
}).compileComponents();
}));

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
}));

describe('Basic', () => {
beforeEach(fakeAsync(() => {
fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
Expand Down
13 changes: 0 additions & 13 deletions projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { clearGridSubs, setupHierarchicalGridScrollDetection } from '../../../te
import { GridFunctions } from '../../../test-utils/grid-functions.spec';
import { IGridCellEventArgs, IgxColumnComponent, IgxGridCellComponent, IgxGridNavigationService } from 'igniteui-angular/grids/core';
import { IPathSegment } from 'igniteui-angular/core';
import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive';

const DEBOUNCE_TIME = 60;
const GRID_CONTENT_CLASS = '.igx-grid__tbody-content';
Expand Down Expand Up @@ -38,20 +37,11 @@ describe('IgxHierarchicalGrid Navigation', () => {
jasmine.DEFAULT_TIMEOUT_INTERVAL = defaultTimeout * 2;
}));

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
}));

afterAll(() => jasmine.DEFAULT_TIMEOUT_INTERVAL = defaultTimeout);

describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
fixture = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent);
fixture.detectChanges();
hierarchicalGrid = fixture.componentInstance.hgrid;
Expand Down Expand Up @@ -964,9 +954,6 @@ describe('IgxHierarchicalGrid Navigation', () => {

describe('IgxHierarchicalGrid Navigation API #hGrid', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 1 }]
});
fixture = TestBed.createComponent(IgxHierarchicalGridMultiLayoutComponent);
fixture.detectChanges();
hierarchicalGrid = fixture.componentInstance.hgrid;
Expand Down
4 changes: 0 additions & 4 deletions ...cts/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { IgxHierarchicalGridDefaultComponent } from '../../../test-utils/hierarc
import { firstValueFrom } from 'rxjs';
import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular/core';
import { IgxGridNavigationService } from 'igniteui-angular/grids/core';
import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive';

describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
let fixture;
Expand All @@ -34,9 +33,6 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
}));

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 1 }]
});
fixture = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent);
fixture.detectChanges();
hierarchicalGrid = fixture.componentInstance.hgrid;
Expand Down
4 changes: 0 additions & 4 deletions projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { GridFunctions } from '../../../test-utils/grid-functions.spec';
import { DebugElement } from '@angular/core';
import { firstValueFrom } from 'rxjs';
import { CellType } from 'igniteui-angular/grids/core';
import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive';

const DEBOUNCETIME = 60;

Expand Down Expand Up @@ -397,9 +396,6 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => {
const treeColumns = ['ID', 'Name', 'HireDate', 'Age', 'OnPTO'];

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
fix = TestBed.createComponent(IgxTreeGridWithScrollsComponent);
fix.detectChanges();
treeGrid = fix.componentInstance.treeGrid;
Expand Down
13 changes: 0 additions & 13 deletions projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec';
import { GridSelectionFunctions, GridSummaryFunctions, GridFunctions } from '../../../test-utils/grid-functions.spec';
import { GridSelectionMode } from 'igniteui-angular/grids/core';
import { IgxStringFilteringOperand } from 'igniteui-angular/core';
import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive';

describe('IgxTreeGrid - Multi Cell selection #tGrid', () => {

Expand All @@ -33,9 +32,6 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => {
let detect;

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 1 }]
});
fix = TestBed.createComponent(IgxTreeGridSelectionKeyComponent);
fix.detectChanges();
treeGrid = fix.componentInstance.treeGrid;
Expand Down Expand Up @@ -560,9 +556,6 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => {
let detect;

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
fix = TestBed.createComponent(IgxTreeGridSelectionComponent);
fix.detectChanges();
treeGrid = fix.componentInstance.treeGrid;
Expand Down Expand Up @@ -675,9 +668,6 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => {
let treeGrid;

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
fix = TestBed.createComponent(IgxTreeGridSelectionWithTransactionComponent);
fix.detectChanges();
treeGrid = fix.componentInstance.treeGrid;
Expand Down Expand Up @@ -808,9 +798,6 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => {
let treeGrid;

beforeEach(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
fix = TestBed.createComponent(IgxTreeGridFKeySelectionWithTransactionComponent);
fix.detectChanges();
treeGrid = fix.componentInstance.treeGrid;
Expand Down
7 changes: 0 additions & 7 deletions projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { DebugElement } from '@angular/core';
import { IgxTreeGridComponent } from './tree-grid.component';
import { IgxSummaryRow, IgxTreeGridRow } from 'igniteui-angular/grids/core';
import { IgxNumberFilteringOperand } from 'igniteui-angular/core';
import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive';

describe('IgxTreeGrid - Summaries #tGrid', () => {
const DEBOUNCETIME = 30;
Expand All @@ -34,12 +33,6 @@ describe('IgxTreeGrid - Summaries #tGrid', () => {
}).compileComponents();
}));

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }]
});
}));

describe('', () => {
let fix;
let treeGrid: IgxTreeGridComponent;
Expand Down
Loading