diff --git a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts index f50e55d78d2..b45dce222ba 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts @@ -64,6 +64,7 @@ export abstract class IgxForOfToken { public abstract chunkLoad: EventEmitter; public abstract chunkPreload: EventEmitter; + public abstract chunkSizeChange: EventEmitter; public abstract scrollTo(index: number): void; public abstract getScrollForIndex(index: number, bottom?: boolean): number; @@ -203,6 +204,13 @@ export class IgxForOfDirective extends IgxForOfToken(); + /** + * @hidden @internal + * An event that is emitted when chunk size is changing. Emits new value. + */ + @Output() + public chunkSizeChange = new EventEmitter(); + /** * An event that is emitted after the rendered content size of the igxForOf has been changed. */ @@ -1453,6 +1461,9 @@ export class IgxForOfDirective extends IgxForOfToken this.state.chunkSize) { const diff = chunkSize - this.state.chunkSize; for (let i = 0; i < diff; i++) { diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index aadb20b38f2..b90aa43d01e 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -94,8 +94,8 @@ import { onResourceChangeHandle } from 'igniteui-angular/core'; import { IgcTrialWatermark } from 'igniteui-trial-watermark'; -import { Subject, pipe, fromEvent, animationFrameScheduler, merge } from 'rxjs'; -import { takeUntil, first, filter, throttleTime, map, shareReplay, takeWhile } from 'rxjs/operators'; +import { Subject, pipe, fromEvent, animationFrameScheduler, merge, BehaviorSubject, timer } from 'rxjs'; +import { takeUntil, first, filter, throttleTime, map, shareReplay, takeWhile, throttle, take, switchMap } from 'rxjs/operators'; import { IgxToggleDirective, IForOfDataChangeEventArgs, @@ -116,8 +116,8 @@ 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('SCROLL_THROTTLE_TIME', { - factory: () => 40 +export const SCROLL_THROTTLE_TIME_MULTIPLIER = /*@__PURE__*/new InjectionToken('SCROLL_THROTTLE_TIME', { + factory: () => 10 }); @@ -177,7 +177,8 @@ 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); + private readonly THROTTLE_TIME_MULTIPLIER = inject(SCROLL_THROTTLE_TIME_MULTIPLIER); + private throttleTime$ = new BehaviorSubject(this.THROTTLE_TIME_MULTIPLIER); /** * Gets/Sets the display time for the row adding snackbar notification. @@ -3731,7 +3732,12 @@ export abstract class IgxGridBaseDirective implements GridType, this.scrollNotify.pipe( filter(() => !this._init), - throttleTime(this.THROTTLE_TIME, animationFrameScheduler, { leading: false, trailing: true }), + throttle(() => + this.throttleTime$.pipe( + take(1), + switchMap(time => timer(time, animationFrameScheduler)) + ) + ), destructor ) .subscribe((event) => { @@ -3822,6 +3828,14 @@ export abstract class IgxGridBaseDirective implements GridType, this.updateMergedData(); }); + this.verticalScrollContainer.chunkSizeChange.pipe(destructor).subscribe((count: number) => { + this.updateScrollThrottle(count * this.headerContainer.state.chunkSize); + }); + + this.headerContainer.chunkSizeChange.pipe(destructor).subscribe((count: number) => { + this.updateScrollThrottle(count * this.verticalScrollContainer.state.chunkSize); + }); + this.verticalScrollContainer.scrollbarVisibilityChanged.pipe(filter(() => !this._init), destructor).subscribe(() => { // called to recalc all widths that may have changes as a result of // the vert. scrollbar showing/hiding @@ -3969,6 +3983,12 @@ export abstract class IgxGridBaseDirective implements GridType, return this._mergedDataInView; } + protected updateScrollThrottle(cells: number) { + // for less than 100 no throttle, 10ms more for every 100 cells + const throttle = cells <= 100 ? 0 : Math.floor(cells / 100) * this.THROTTLE_TIME_MULTIPLIER; + this.throttleTime$.next(throttle); + } + /** * @hidden * @internal diff --git a/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts index 45555aba658..cb622a8250f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts @@ -1,7 +1,7 @@ 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 { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../src/grid-base.directive'; import { SelectionWithScrollsComponent, SelectionWithTransactionsComponent, @@ -980,7 +980,7 @@ describe('IgxGrid - Cell selection #grid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); fix = TestBed.createComponent(SelectionWithScrollsComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts index 3a9e46bba17..91b3e06a24e 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts @@ -15,7 +15,7 @@ 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'; +import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../src/grid-base.directive'; const DEBOUNCETIME = 100; @@ -224,7 +224,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); fix = TestBed.createComponent(VirtualGridComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts index 9193a9dac47..cc54dcb646b 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts @@ -11,7 +11,7 @@ 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'; +import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../src/grid-base.directive'; const DEBOUNCE_TIME = 60; const CELL_CSS_CLASS = '.igx-grid__td'; @@ -30,7 +30,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); fix = TestBed.createComponent(ColumnLayoutTestComponent); }); diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts index 2db66e08b36..266a2cc9325 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts @@ -18,7 +18,7 @@ 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'; +import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../src/grid-base.directive'; describe('IgxGrid Component Tests #grid', () => { const MIN_COL_WIDTH = '136px'; @@ -44,7 +44,7 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); }); diff --git a/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts index 497caf776ae..5a6d88b3f87 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts @@ -15,7 +15,7 @@ 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'; +import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../src/grid-base.directive'; const DEBOUNCE_TIME = 60; const ROW_TAG = 'igx-grid-row'; @@ -46,7 +46,7 @@ describe('IgxGrid Master Detail #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); })); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts index 45a1b87d69a..d65b0edfb6c 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts @@ -10,7 +10,7 @@ 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'; +import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; const DEBOUNCE_TIME = 60; const GRID_CONTENT_CLASS = '.igx-grid__tbody-content'; @@ -40,7 +40,7 @@ describe('IgxHierarchicalGrid Navigation', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); })); @@ -50,7 +50,7 @@ describe('IgxHierarchicalGrid Navigation', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); fixture = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent); fixture.detectChanges(); @@ -965,7 +965,7 @@ describe('IgxHierarchicalGrid Navigation', () => { describe('IgxHierarchicalGrid Navigation API #hGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 1 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 1 }] }); fixture = TestBed.createComponent(IgxHierarchicalGridMultiLayoutComponent); fixture.detectChanges(); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts index 0bd2f1cb326..802fbf76620 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts @@ -14,7 +14,7 @@ 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'; +import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; describe('IgxHierarchicalGrid Virtualization #hGrid', () => { let fixture; @@ -35,7 +35,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 1 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 1 }] }); fixture = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent); fixture.detectChanges(); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts index d3b4718661e..1fc344f8240 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts @@ -9,7 +9,7 @@ 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'; +import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; const DEBOUNCETIME = 60; @@ -398,7 +398,7 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); fix = TestBed.createComponent(IgxTreeGridWithScrollsComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts index 404bc18748c..2225bd28b1f 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts @@ -11,7 +11,7 @@ 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'; +import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { @@ -34,7 +34,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 1 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 1 }] }); fix = TestBed.createComponent(IgxTreeGridSelectionKeyComponent); fix.detectChanges(); @@ -561,7 +561,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); fix = TestBed.createComponent(IgxTreeGridSelectionComponent); fix.detectChanges(); @@ -676,7 +676,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); fix = TestBed.createComponent(IgxTreeGridSelectionWithTransactionComponent); fix.detectChanges(); @@ -809,7 +809,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); fix = TestBed.createComponent(IgxTreeGridFKeySelectionWithTransactionComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts index b27b063dbd7..e45e2c4c3b5 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts @@ -15,7 +15,7 @@ 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'; +import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; describe('IgxTreeGrid - Summaries #tGrid', () => { const DEBOUNCETIME = 30; @@ -36,7 +36,7 @@ describe('IgxTreeGrid - Summaries #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }); }));