From 320c3d3f4a68cef5a7387ed93af7fcc28e6a9dde Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Tue, 29 Mar 2022 12:25:48 +0300
Subject: [PATCH] try fix change detection

---
 src/lib/listing/listing-component.directive.ts      |  7 +++++--
 .../table-content/table-content.component.html      |  6 +++---
 .../table-content/table-content.component.ts        | 13 +------------
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/lib/listing/listing-component.directive.ts b/src/lib/listing/listing-component.directive.ts
index ff83791..45e9da3 100644
--- a/src/lib/listing/listing-component.directive.ts
+++ b/src/lib/listing/listing-component.directive.ts
@@ -1,6 +1,6 @@
 import { Directive, Injector, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
-import { map, switchMapTo } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { FilterService } from '../filtering';
 import { SortingService } from '../sorting';
 import { AutoUnsubscribe, shareDistinctLast } from '../utils';
@@ -40,7 +40,10 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
     private get _sortedDisplayedEntities$(): Observable<T[]> {
         const sort = (entities: T[]) => this.sortingService.defaultSort(entities);
         const sortedEntities$ = this.listingService.displayed$.pipe(map(sort));
-        return this.sortingService.sortingOption$.pipe(switchMapTo(sortedEntities$), shareDistinctLast());
+        return this.sortingService.sortingOption$.pipe(
+            switchMap(() => sortedEntities$),
+            shareDistinctLast(),
+        );
     }
 
     private get _noMatch$(): Observable<boolean> {
diff --git a/src/lib/listing/table-content/table-content.component.html b/src/lib/listing/table-content/table-content.component.html
index 12f79ee..b7b111a 100644
--- a/src/lib/listing/table-content/table-content.component.html
+++ b/src/lib/listing/table-content/table-content.component.html
@@ -3,11 +3,11 @@
         [class.no-data]="listingComponent.noContent$ | async"
         [itemSize]="itemSize"
         [maxBufferPx]="1500"
-        [minBufferPx]="300"
-        iqserHasScrollbar
+        [minBufferPx]="1000"
         id="virtual-scroll"
+        iqserHasScrollbar
     >
-        <ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$; trackBy: trackBy; templateCacheSize: 60">
+        <ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$ | async; trackBy: trackBy">
             <!-- mouseenter and mouseleave triggers change detection event if itemMouse functions are undefined -->
             <!-- this little hack below ensures that change detection won't be triggered if functions are undefined -->
             <div
diff --git a/src/lib/listing/table-content/table-content.component.ts b/src/lib/listing/table-content/table-content.component.ts
index 5765f8a..c1c1d87 100644
--- a/src/lib/listing/table-content/table-content.component.ts
+++ b/src/lib/listing/table-content/table-content.component.ts
@@ -1,14 +1,4 @@
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    HostListener,
-    Inject,
-    Input,
-    OnDestroy,
-    ViewChild,
-} from '@angular/core';
+import { AfterViewInit, Component, forwardRef, HostListener, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { delay, tap } from 'rxjs/operators';
 import { AutoUnsubscribe, trackByFactory } from '../../utils';
@@ -22,7 +12,6 @@ import { HelpModeService } from '@iqser/common-ui';
     selector: 'iqser-table-content',
     templateUrl: './table-content.component.html',
     styleUrls: ['./table-content.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableContentComponent<T extends IListable> extends AutoUnsubscribe implements OnDestroy, AfterViewInit {
     @Input() itemSize!: number;