fix(perf): Apply base grid scroll performance optimizations. (#16708)

---------

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

Author: 3 people

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 21.2.0
+
+### Breaking Changes
+
+- `igxForOf`, `igxGrid`, `igxTreeGrid`, `igxHierarchicalGrid`, `igxPivotGrid`
+    - original `data` array mutations (like adding/removing/moving records in the original array) are no longer detected automatically. Components need an array ref change for the change to be detected.
+
 ## 21.1.0
 
 ### New Features

projects/igniteui-angular-performance/src/app/app.component.html

@@ -5,6 +5,10 @@
         {{ route.title }}
       </button>
     }
+
+    <button igxButton="contained" (click)="OnPerfTest()">
+        Test scroll performance
+    </button>
   </div>
   <router-outlet />
 </main>

projects/igniteui-angular-performance/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { RouterLink, RouterOutlet, Routes } from '@angular/router';
 import { IgxButtonDirective } from 'igniteui-angular';
 import { routes } from './app.routes';
@@ -11,4 +11,24 @@ import { routes } from './app.routes';
 })
 export class AppComponent {
     protected routes: Routes = routes;
+
+    @ViewChild(RouterOutlet) outlet!: RouterOutlet;
+
+    public async OnPerfTest() {
+        const longTask = [];
+        const observer = new PerformanceObserver((list) => {
+            longTask.push(...list.getEntries());
+          });
+          observer.observe({ entryTypes: ['longtask'] });
+          const grid = (this.outlet.component as any).grid || (this.outlet.component as any).pivotGrid;
+          for (let i = 0; i < 100; i++) {
+            grid.navigateTo(i * 50);
+            await new Promise(r => setTimeout(r, 50));
+          }
+          const sum = longTask.reduce((acc, task) => acc + task.duration, 0);
+          const avgTime = sum / longTask.length;
+          console.log('Long Tasks:'+ longTask.length + ", ", 'Average Long Task Time:', avgTime);
+          observer.disconnect();
+
+    }
 }

projects/igniteui-angular-performance/src/app/grid/grid.component.html

@@ -1,8 +1,9 @@
 <div class="grid-wrapper">
   <igx-grid
+
     #grid
     [data]="data"
-    [allowFiltering]="true"
+    [allowFiltering]="false"
     [height]="'100%'"
     [width]="'100%'"
   >

projects/igniteui-angular-performance/src/app/pivot-grid/pivot-grid.component.ts

@@ -182,9 +182,9 @@ export class PivotGridComponent {
                 sortDirection: SortingDirection.None
             },
                 {
-                    fullDate: false,
+                    fullDate: true,
                     quarters: true,
-                    months: false,
+                    months: true,
                 }),
         ],
         values: [

projects/igniteui-angular-performance/src/styles.scss

@@ -1,4 +1,4 @@
-@use '../../igniteui-angular/src/lib/core/styles/themes' as *;
+@use '../../igniteui-angular/core/src/core/styles/themes' as *;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 @include core();
 @include typography(

projects/igniteui-angular/directives/src/directives/for-of/base.helper.component.ts

@@ -43,11 +43,6 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
         this._scrollNativeSize = this.calculateScrollNativeSize();
     }
 
-    @HostListener('scroll', ['$event'])
-    public onScroll(event) {
-        this.scrollAmount = event.target.scrollTop || event.target.scrollLeft;
-    }
-
 
     public ngAfterViewInit() {
         this._afterViewInit = true;

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

@@ -249,15 +249,17 @@ describe('IgxForOf directive -', () => {
         it('should update vertical scroll offsets if igxForOf changes. ', () => {
             fix.componentInstance.scrollTop(5);
             fix.detectChanges();
+            let transform = displayContainer.style.transform;
 
-            expect(parseInt(displayContainer.style.top, 10)).toEqual(-5);
+            expect(parseInt(transform.slice(transform.indexOf('(') + 1, transform.indexOf(')')), 10)).toEqual(-5);
 
             spyOn(fix.componentInstance.parentVirtDir.chunkLoad, 'emit');
 
             fix.componentInstance.data = [{ 1: 1, 2: 2, 3: 3, 4: 4 }];
             fix.detectChanges();
 
-            expect(parseInt(displayContainer.style.top, 10)).toEqual(0);
+            transform = displayContainer.style.transform;
+            expect(parseInt(transform.slice(transform.indexOf('(') + 1, transform.indexOf(')')), 10)).toEqual(0);
             expect(fix.componentInstance.parentVirtDir.chunkLoad.emit).toHaveBeenCalledTimes(1);
         });
 

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

@@ -1,5 +1,5 @@
 import { NgForOfContext } from '@angular/common';
-import { ChangeDetectorRef, ComponentRef, Directive, DoCheck, EmbeddedViewRef, EventEmitter, Input, IterableChanges, IterableDiffer, IterableDiffers, NgZone, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef, AfterViewInit, booleanAttribute, DOCUMENT, inject } from '@angular/core';
+import { ChangeDetectorRef, ComponentRef, Directive, EmbeddedViewRef, EventEmitter, Input, IterableChanges, IterableDiffer, IterableDiffers, NgZone, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef, AfterViewInit, booleanAttribute, DOCUMENT, inject, afterNextRender, runInInjectionContext, EnvironmentInjector } from '@angular/core';
 
 import { DisplayContainerComponent } from './display.container';
 import { HVirtualHelperComponent } from './horizontal.virtual.helper.component';
@@ -84,16 +84,17 @@ export abstract class IgxForOfToken<T, U extends T[] = T[]> {
     ],
     standalone: true
 })
-export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U> implements OnInit, OnChanges, DoCheck, OnDestroy, AfterViewInit {
+export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U> implements OnInit, OnChanges, OnDestroy, AfterViewInit {
     private _viewContainer = inject(ViewContainerRef);
     protected _template = inject<TemplateRef<NgForOfContext<T>>>(TemplateRef);
     protected _differs = inject(IterableDiffers);
+    protected _injector = inject(EnvironmentInjector);
     public cdr = inject(ChangeDetectorRef);
     protected _zone = inject(NgZone);
     protected syncScrollService = inject(IgxForOfScrollSyncService);
     protected platformUtil = inject(PlatformUtil);
     protected document = inject(DOCUMENT);
-
+    private _igxForOf: U & T[] | null = null;
 
     /**
      * Sets the data to be rendered.
@@ -102,7 +103,16 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
      * ```
      */
     @Input()
-    public igxForOf: U & T[] | null;
+    public get igxForOf(): U & T[] | null {
+        return this._igxForOf;
+    }
+
+    public set igxForOf(value: U & T[] | null) {
+        this._igxForOf = value;
+        if(this._differ) {
+            this.resolveDataDiff();
+        }
+    }
 
     /**
      * Sets the property name from which to read the size in the data object.
@@ -444,7 +454,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         }
         this._maxSize = this._calcMaxBrowserSize();
         if (this.igxForScrollOrientation === 'vertical') {
-            this.dc.instance._viewContainer.element.nativeElement.style.top = '0px';
+            this.dc.instance._viewContainer.element.nativeElement.style.transform = `translateY(0px)`;
             this.scrollComponent = this.syncScrollService.getScrollMaster(this.igxForScrollOrientation);
             if (!this.scrollComponent || this.scrollComponent.destroyed) {
                 this.scrollComponent = vc.createComponent(VirtualHelperComponent).instance;
@@ -484,6 +494,8 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
             }
             this._updateScrollOffset();
         }
+        this._differ = this._differs.find(this.igxForOf || []).create(this.igxForTrackBy);
+        this.resolveDataDiff();
     }
 
     public ngAfterViewInit(): void {
@@ -555,7 +567,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
     /**
      * @hidden
      */
-    public ngDoCheck(): void {
+    public resolveDataDiff(): void {
         if (this._differ) {
             const changes = this._differ.diff(this.igxForOf);
             if (changes) {
@@ -618,7 +630,13 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
             // Actual scroll delta that was added is smaller than 1 and onScroll handler doesn't trigger when scrolling < 1px
             const scrollOffset = this.fixedUpdateAllElements(this._virtScrollPosition);
             // scrollOffset = scrollOffset !== parseInt(this.igxForItemSize, 10) ? scrollOffset : 0;
-            this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
+            runInInjectionContext(this._injector, () => {
+                afterNextRender({
+                    write: () => {
+                        this.dc.instance._viewContainer.element.nativeElement.style.transform = `translateY(${-scrollOffset}px)`;
+                    }
+                  });
+              });
         }
 
         const maxRealScrollTop = this.scrollComponent.nativeElement.scrollHeight - containerSize;
@@ -903,15 +921,22 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
             return;
         }
+        this.scrollComponent.scrollAmount = event.target.scrollTop;
         if (!this._bScrollInternal) {
-            this._calcVirtualScrollPosition(event.target.scrollTop);
+            this._calcVirtualScrollPosition(this.scrollComponent.scrollAmount);
         } else {
             this._bScrollInternal = false;
         }
         const prevStartIndex = this.state.startIndex;
         const scrollOffset = this.fixedUpdateAllElements(this._virtScrollPosition);
 
-        this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
+        runInInjectionContext(this._injector, () => {
+            afterNextRender({
+                write: () => {
+                    this.dc.instance._viewContainer.element.nativeElement.style.transform = `translateY(${-scrollOffset}px)`;
+                }
+              });
+          });
 
         this._zone.onStable.pipe(first()).subscribe(this.recalcUpdateSizes.bind(this));
 
@@ -1091,13 +1116,14 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         if (!parseInt(firstScrollChild.style.width, 10)) {
             return;
         }
+        this.scrollComponent.scrollAmount = event.target.scrollLeft;
         if (!this._bScrollInternal) {
-            this._calcVirtualScrollPosition(event.target.scrollLeft);
+            this._calcVirtualScrollPosition(this.scrollComponent.scrollAmount);
         } else {
             this._bScrollInternal = false;
         }
         const prevStartIndex = this.state.startIndex;
-        const scrLeft = event.target.scrollLeft;
+        const scrLeft = this.scrollComponent.scrollAmount;
         // Updating horizontal chunks
         const scrollOffset = this.fixedUpdateAllElements(Math.abs(this._virtScrollPosition));
         if (scrLeft < 0) {
@@ -1463,8 +1489,10 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         const scroll = this.scrollComponent.nativeElement;
         scrollOffset = scroll && this.scrollComponent.size ?
         currentScroll - this.sizesCache[this.state.startIndex] : 0;
-        const dir = this.igxForScrollOrientation === 'horizontal' ? 'left' : 'top';
-        this.dc.instance._viewContainer.element.nativeElement.style[dir] = -(scrollOffset) + 'px';
+        const dir = this.igxForScrollOrientation === 'horizontal' ? 'left' : 'transform';
+        this.dc.instance._viewContainer.element.nativeElement.style[dir] = this.igxForScrollOrientation === 'horizontal' ?
+         -(scrollOffset) + 'px' :
+         `translateY(${-scrollOffset}px)`;
     }
 
     protected _adjustScrollPositionAfterSizeChange(sizeDiff) {
@@ -1474,7 +1502,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
             this.recalcUpdateSizes();
             const offset = this.igxForScrollOrientation === 'horizontal' ?
                 parseInt(this.dc.instance._viewContainer.element.nativeElement.style.left, 10) :
-                parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
+                Number(this.dc.instance._viewContainer.element.nativeElement.style.transform?.match(/translateY\((-?\d+\.?\d*)px\)/)?.[1]);
             const newSize = this.sizesCache[this.state.startIndex] - offset;
             this.scrollPosition = newSize;
             if (this.scrollPosition !== newSize) {
@@ -1526,7 +1554,7 @@ export class IgxGridForOfContext<T, U extends T[] = T[]> extends IgxForOfContext
     selector: '[igxGridFor][igxGridForOf]',
     standalone: true
 })
-export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirective<T, U> implements OnInit, OnChanges, DoCheck {
+export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirective<T, U> implements OnInit, OnChanges {
     protected syncService = inject(IgxForOfSyncService);
 
     @Input()
@@ -1643,7 +1671,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
         this.syncService.setMaster(this, true);
     }
 
-    public override ngDoCheck() {
+    public override resolveDataDiff() {
         if (this._differ) {
             const changes = this._differ.diff(this.igxForOf);
             if (changes) {
@@ -1677,19 +1705,25 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
     }
 
     public override onScroll(event) {
-        if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
+        this.scrollComponent.scrollAmount = event.target.scrollTop;
+        if (!this.scrollComponent.size) {
             return;
         }
         if (!this._bScrollInternal) {
-            this._calcVirtualScrollPosition(event.target.scrollTop);
+            this._calcVirtualScrollPosition(this.scrollComponent.scrollAmount);
         } else {
             this._bScrollInternal = false;
         }
         const scrollOffset = this.fixedUpdateAllElements(this._virtScrollPosition);
+        runInInjectionContext(this._injector, () => {
+            afterNextRender({
+                write: () => {
+                    this.dc.instance._viewContainer.element.nativeElement.style.transform = `translateY(${-scrollOffset}px)`;
+                    this._zone.onStable.pipe(first()).subscribe(this.recalcUpdateSizes.bind(this));
+                }
+              });
+          });
 
-        this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
-
-        this._zone.onStable.pipe(first()).subscribe(this.recalcUpdateSizes.bind(this));
         this.cdr.markForCheck();
     }
 
@@ -1699,6 +1733,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
         if (!this.scrollComponent || !parseInt(firstScrollChild.style.width, 10)) {
             return;
         }
+        this.scrollComponent.scrollAmount = scrollAmount;
         // Updating horizontal chunks
         const scrollOffset = this.fixedUpdateAllElements(Math.abs(scrollAmount));
         if (scrollAmount < 0) {

projects/igniteui-angular/grids/core/src/api.service.ts

@@ -319,6 +319,7 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
             grid.transactions.add(transaction);
         } else {
             grid.data.push(rowData);
+            grid.data = cloneArray(grid.data);
         }
         grid.validation.markAsTouched(rowId);
         grid.validation.update(rowId, rowData);
@@ -334,6 +335,7 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
                 grid.transactions.add(transaction, grid.data[index]);
             } else {
                 grid.data.splice(index, 1);
+                grid.data = cloneArray(grid.data);
             }
         } else {
             const state: State = grid.transactions.getState(rowID);