fix(datagrid): remove setTimeout and check visibility for calculations

vmware-clarity · Oct 2, 2024 · 80fc550 · 80fc550
1 parent 29eed4c
commit 80fc550
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -1191,6 +1191,8 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
     expandableRows: ExpandableRowsCount;
     // (undocumented)
     hasVirtualScroller: boolean;
+    // (undocumented)
+    isVisible: boolean;
     // Warning: (ae-forgotten-export) The symbol "Items" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
@@ -1206,6 +1208,8 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
     loadingMoreItems: boolean;
     // (undocumented)
     ngAfterContentInit(): void;
+    // (undocumented)
+    ngAfterViewChecked(): void;
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
@@ -5253,7 +5257,7 @@ export class ÇlrDatagridHeaderRenderer implements OnDestroy {
 
 // @public (undocumented)
 export class ÇlrDatagridMainRenderer implements AfterContentInit, AfterViewInit, AfterViewChecked, OnDestroy {
-    constructor(organizer: DatagridRenderOrganizer, items: Items, page: Page, domAdapter: DomAdapter, el: ElementRef<HTMLElement>, renderer: Renderer2, detailService: DetailService, tableSizeService: TableSizeService, columnsService: ColumnsService, ngZone: NgZone, keyNavigation: KeyNavigationGridController);
+    constructor(datagrid: ClrDatagrid, organizer: DatagridRenderOrganizer, items: Items, page: Page, domAdapter: DomAdapter, el: ElementRef<HTMLElement>, renderer: Renderer2, detailService: DetailService, tableSizeService: TableSizeService, columnsService: ColumnsService, ngZone: NgZone, keyNavigation: KeyNavigationGridController);
     // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)

diff --git a/projects/angular/src/data/datagrid/datagrid.ts b/projects/angular/src/data/datagrid/datagrid.ts
@@ -24,7 +24,7 @@ import {
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
-import { combineLatest, fromEvent, merge, of, Subscription } from 'rxjs';
+import { BehaviorSubject, combineLatest, fromEvent, merge, of, Subscription } from 'rxjs';
 import { debounceTime, switchMap } from 'rxjs/operators';
 
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
@@ -127,6 +127,7 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
 
   selectAllId: string;
   hasVirtualScroller: boolean;
+  isVisible = false;
 
   /* reference to the enum so that template can access */
   SELECTION_TYPE = SelectionType;
@@ -135,6 +136,7 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
    * Subscriptions to all the services and queries changes
    */
   private _subscriptions: Subscription[] = [];
+  private visiblityChange = new BehaviorSubject(false);
 
   constructor(
     private organizer: DatagridRenderOrganizer,
@@ -347,6 +349,10 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
             this._calculationRows.insert(row._view);
           });
         }
+      }),
+      this.visiblityChange.subscribe(visibility => {
+        this.isVisible = !!visibility;
+        this.datagrid.nativeElement.style.visibility = visibility ? 'visible' : 'hidden';
       })
     );
 
@@ -368,6 +374,12 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
     });
   }
 
+  ngAfterViewChecked() {
+    if (!this.isVisible && this.el.nativeElement.offsetParent) {
+      this.visiblityChange.next(true);
+    }
+  }
+
   ngOnDestroy() {
     this._subscriptions.forEach((sub: Subscription) => sub.unsubscribe());
   }

diff --git a/projects/angular/src/data/datagrid/render/main-renderer.ts b/projects/angular/src/data/datagrid/render/main-renderer.ts
@@ -22,6 +22,7 @@ import {
 import { Subscription } from 'rxjs';
 
 import { DomAdapter } from '../../../utils/dom-adapter/dom-adapter';
+import { ClrDatagrid } from '../datagrid';
 import { DatagridColumnChanges } from '../enums/column-changes.enum';
 import { DatagridRenderStep } from '../enums/render-step.enum';
 import { ColumnStateDiff } from '../interfaces/column-state.interface';
@@ -68,6 +69,7 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
   private columnsSizesStable = false;
 
   constructor(
+    private datagrid: ClrDatagrid,
     private organizer: DatagridRenderOrganizer,
     private items: Items,
     private page: Page,
@@ -121,10 +123,8 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
   }
 
   ngAfterViewChecked() {
-    if (this.shouldStabilizeColumns) {
-      setTimeout(() => {
-        this.stabilizeColumns();
-      }, 0);
+    if (this.shouldStabilizeColumns && this.datagrid.isVisible) {
+      this.stabilizeColumns();
     }
 
     if (this.shouldComputeHeight()) {