feat(grids): Apply different throttle based on the amount of data in display

---------

Co-authored-by: MKirova <MKirova@DEV-MKIROVA>
Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>

Author: 3 people

CHANGELOG.md

@@ -17,6 +17,10 @@ All notable changes for each version of this project will be documented in this
         ```
 
 ### General
+
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`
+    - Improved performance by dynamically adjusting the scroll throttle based on the data displayed in grid.
+
 - `IgxCombo`, `IgxSimpleCombo`
     - Combo and Simple Combo now close the dropdown list and move the focus to the next focusable element on "Tab" press and clear the selection if the combo is collapsed on "Escape".
 

projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts

@@ -64,6 +64,7 @@ export abstract class IgxForOfToken<T, U extends T[] = T[]> {
 
     public abstract chunkLoad: EventEmitter<IForOfState>;
     public abstract chunkPreload: EventEmitter<IForOfState>;
+    public abstract chunkSizeChange: EventEmitter<number>;
 
     public abstract scrollTo(index: number): void;
     public abstract getScrollForIndex(index: number, bottom?: boolean): number;
@@ -203,6 +204,13 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
     @Output()
     public scrollbarVisibilityChanged = new EventEmitter<any>();
 
+    /**
+     * @hidden @internal
+     * An event that is emitted when chunk size is changing. Emits new value.
+     */
+    @Output()
+    public chunkSizeChange = new EventEmitter<number>();
+
     /**
      * An event that is emitted after the rendered content size of the igxForOf has been changed.
      */
@@ -1453,6 +1461,9 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
      */
     protected applyChunkSizeChange() {
         const chunkSize = this.isRemote ? (this.igxForOf ? this.igxForOf.length : 0) : this._calculateChunkSize();
+        if (chunkSize !== this.state.chunkSize) {
+            this.chunkSizeChange.emit(chunkSize);
+        }
         if (chunkSize > this.state.chunkSize) {
             const diff = chunkSize - this.state.chunkSize;
             for (let i = 0; i < diff; i++) {

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,
@@ -113,11 +113,11 @@ import { getCurrentI18n, getNumberFormatter, IResourceChangeEventArgs,  } from '
 import { I18N_FORMATTER } from 'igniteui-angular/core';
 
 /**
- * Injection token for setting the throttle time used in grid virtual scroll.
+ * Injection token for setting the throttle time multiplier used in grid virtual scroll.
  * @hidden
  */
-export const SCROLL_THROTTLE_TIME = /*@__PURE__*/new InjectionToken<number>('SCROLL_THROTTLE_TIME', {
-    factory: () => 40
+export const SCROLL_THROTTLE_TIME_MULTIPLIER = /*@__PURE__*/new InjectionToken<number>('SCROLL_THROTTLE_TIME_MULTIPLIER', {
+    factory: () => 10
 });
 
 
@@ -177,7 +177,11 @@ 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<number>(this.THROTTLE_TIME_MULTIPLIER);
+    /** @hidden @internal */
+    public throttleScheduler = animationFrameScheduler;
+    private readonly MAX_SCROLL_THROTTLE: number = 60;
 
     /**
      * Gets/Sets the display time for the row adding snackbar notification.
@@ -3731,7 +3735,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, this.throttleScheduler))
+                )
+              ),
             destructor
         )
             .subscribe((event) => {
@@ -3822,6 +3831,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 +3986,12 @@ export abstract class IgxGridBaseDirective implements GridType,
         return this._mergedDataInView;
     }
 
+    protected updateScrollThrottle(cells: number) {
+        // for less than 100 - throttle 0, 10ms more for every 100 cells upto max of 60ms
+        const currentThrottle = cells <= 100 ? 0 : Math.floor(cells / 100) * this.THROTTLE_TIME_MULTIPLIER;
+        this.throttleTime$.next(Math.min(currentThrottle, this.MAX_SCROLL_THROTTLE));
+    }
+
     /**
      * @hidden
      * @internal

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();

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();

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);
     });

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 }]
             });
         });
 

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 }]
         });
     }));
 

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: 0 }]
             });
             fixture = TestBed.createComponent(IgxHierarchicalGridMultiLayoutComponent);
             fixture.detectChanges();

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: 0 }]
         });
         fixture = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent);
         fixture.detectChanges();