fix(core): revert "fixed card layout flickering issue (#8476)" (#8494)

This reverts commit 54e89a9.
SAP · Aug 2, 2022 · 1b0f83c · 1b0f83c
1 parent 806ee25
commit 1b0f83c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 23 deletions.
diff --git a/libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.spec.ts b/libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.spec.ts
@@ -103,7 +103,6 @@ describe('FixedCardLayoutComponent', () => {
                 }
             } as any;
 
-            component.fixedCardLayout.updateLayout();
             component.fixedCardLayout._onDragDropped(event);
             fixture.detectChanges();
 

diff --git a/libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.ts b/libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.ts
@@ -24,7 +24,7 @@ import {
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { CdkDrag, CdkDragDrop, CdkDragEnter, CdkDragStart } from '@angular/cdk/drag-drop';
 import { Subject, Subscription } from 'rxjs';
-import { debounceTime, filter, skip, takeUntil } from 'rxjs/operators';
+import { debounceTime, distinct, filter, takeUntil } from 'rxjs/operators';
 
 import { resizeObservable, RtlService, getDocumentFontSize } from '@fundamental-ngx/core/utils';
 import { Nullable } from '@fundamental-ngx/core/shared';
@@ -146,7 +146,7 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
 
     /** @hidden */
     @ViewChild('layout')
-    _layout: ElementRef<HTMLElement>;
+    _layout: ElementRef;
 
     /** @hidden */
     _cardsArray: CardDefinitionDirective[];
@@ -158,7 +158,7 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
     _cardColumns: CardColumn[];
 
     /** @hidden*/
-    _containerHeight = 0;
+    _containerHeight: number;
 
     /** @hidden handles rtl service */
     _dir = 'ltr';
@@ -184,7 +184,7 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
     _placeholderMargin: boolean;
 
     /** @hidden */
-    _listenResize = true;
+    _listenResize = false;
 
     /** @hidden */
     _hiddenCard: Nullable<CardDefinitionDirective>;
@@ -408,28 +408,25 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
     private _listenOnResize(): void {
         resizeObservable(this._layout.nativeElement)
             .pipe(
-                debounceTime(20),
-                filter(
-                    (entries) => this._listenResize && !!(entries[0].contentRect.height || entries[0].contentRect.width)
-                ),
+                filter(() => this._listenResize),
+                debounceTime(50),
                 takeUntil(this._onDestroy$)
             )
             .subscribe(() => this.updateLayout());
     }
 
     /** @hidden Listen card change and distribute cards on column change */
     private _listenOnCardsChange(): void {
-        this._cards.changes.subscribe(() => {
-            this._processCards();
-            this.updateLayout();
-        });
+        this._cards.changes.subscribe(() => this._processCards());
     }
 
     /** @hidden */
     private _processCards(): void {
         this._cardsArray = this._cards
             .toArray()
             .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);
+
+        this.updateLayout();
     }
 
     /** @hidden Distribute cards among columns to arrange them in "Z" flow */
@@ -458,7 +455,7 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
             }
         });
 
-        this._listenOnCardsHeightChange();
+        this._listenOnCardsSizeChange();
     }
 
     /** @hidden */
@@ -510,18 +507,14 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
                     (columnIndex === columnIndexToAddSpace ? spaceToAdd : 0)
             );
 
-        const prevContainerHeight = this._containerHeight;
-
         // +4px because it's the top & bottom borders of card placeholder
         this._containerHeight = Math.ceil(Math.max(...columnsHeights) + 4);
 
-        if (this._containerHeight !== prevContainerHeight) {
-            this._changeDetector.detectChanges();
-        }
+        this._changeDetector.detectChanges();
     }
 
     /** @hidden */
-    private _listenOnCardsHeightChange(): void {
+    private _listenOnCardsSizeChange(): void {
         this._cardsSizeChangeSubscription.unsubscribe();
         this._cardsSizeChangeSubscription = new Subscription();
 
@@ -535,9 +528,9 @@ export class FixedCardLayoutComponent implements OnInit, AfterViewInit, OnChange
                     this._cardsSizeChangeSubscription.add(
                         resizeObservable(card.nativeElement)
                             .pipe(
-                                skip(1),
-                                debounceTime(20),
-                                filter(() => this._listenResize && !!this._layout.nativeElement.clientHeight)
+                                filter(() => this._listenResize),
+                                distinct((resizeEntry) => resizeEntry[0].contentRect.height),
+                                debounceTime(50)
                             )
                             .subscribe(() => this._setContainerHeight())
                     );