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

#1577)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [X] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

There was added `setTimeout`
#1494 in the renderer
to fix an issue with datagrid being in accordion but that creates
different issue - #1569. The main root cause of the wrong widths inside
the accordion come from that the content of accordion is using separate
component with `ng-content` and that is projected inside
`accordion-panel` wrapped in *ngIf which seems okey but Angular life
cycles go trough that content component before the condition on the ngIf
is met so the calculations are being done wrongly on invisible datagrid.
In header-renderer scrollWidth is 0 due to that the component is not
actually visible after it's visible "shouldStabilizeColumns" is already
false and no more re-calculations are being done.

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: #1569

## What is the new behavior?

Do the calculations when the datagrid is actually visible in the DOM.

## Does this PR introduce a breaking change?

- [ ] Yes
- [X] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <[email protected]>

projects/angular/clarity.api.md

@@ -5257,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, el: ElementRef<HTMLElement>, renderer: Renderer2, detailService: DetailService, tableSizeService: TableSizeService, columnsService: ColumnsService, ngZone: NgZone, keyNavigation: KeyNavigationGridController);
+    constructor(datagrid: ClrDatagrid, organizer: DatagridRenderOrganizer, items: Items, page: Page, el: ElementRef<HTMLElement>, renderer: Renderer2, detailService: DetailService, tableSizeService: TableSizeService, columnsService: ColumnsService, ngZone: NgZone, keyNavigation: KeyNavigationGridController);
     // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)

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,
@@ -118,10 +120,9 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
   }
 
   ngAfterViewChecked() {
-    if (this.shouldStabilizeColumns) {
-      setTimeout(() => {
-        this.stabilizeColumns();
-      }, 0);
+    const datagridIsVisible = this.checkAndUpdateVisibility();
+    if (this.shouldStabilizeColumns && datagridIsVisible) {
+      this.stabilizeColumns();
     }
 
     if (this.shouldComputeHeight()) {
@@ -284,4 +285,14 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
       this.columnsSizesStable = true;
     }
   }
+
+  private checkAndUpdateVisibility() {
+    if (this.el.nativeElement.offsetParent) {
+      this.datagrid.datagrid.nativeElement.style.visibility = 'visible';
+      return true;
+    } else {
+      this.datagrid.datagrid.nativeElement.style.visibility = 'hidden';
+      return false;
+    }
+  }
 }