add share replay

src/lib/filtering/filter.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+import { distinctUntilChanged, map, shareReplay, startWith, switchMap } from 'rxjs/operators';
 import { processFilters, toFlatFilters } from './filter-utils';
 import { IFilterGroup } from './models/filter-group.model';
 import { INestedFilter } from './models/nested-filter.model';
@@ -19,6 +19,7 @@ export class FilterService {
         this.filterGroups$ = this._refresh$.pipe(
             startWith(''),
             switchMap(() => this._filterGroups$.asObservable()),
+            shareReplay(),
         );
 
         this.showResetFilters$ = this._showResetFilters$;
@@ -33,6 +34,7 @@ export class FilterService {
             map(toFlatFilters),
             map(f => !!f.find(el => el.checked)),
             distinctUntilChanged(),
+            shareReplay(),
         );
     }
 

src/lib/listing/listing-component.directive.ts

@@ -28,7 +28,7 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
     abstract readonly tableHeaderLabel: string;
 
     @ViewChild('tableItemTemplate') readonly tableItemTemplate?: TemplateRef<unknown>;
-    @ViewChild('worflowItemTemplate') readonly workflowItemTemplate?: TemplateRef<unknown>;
+    @ViewChild('workflowItemTemplate') readonly workflowItemTemplate?: TemplateRef<unknown>;
 
     private readonly _listingMode$ = new BehaviorSubject<ListingMode>(ListingModes.table);
 
@@ -48,7 +48,7 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
     private get _sortedDisplayedEntities$(): Observable<readonly T[]> {
         const sort = (entities: T[]) => this.sortingService.defaultSort(entities);
         const sortedEntities = () => this.listingService.displayed$.pipe(map(sort));
-        return this.sortingService.sortingOption$.pipe(switchMap(sortedEntities));
+        return this.sortingService.sortingOption$.pipe(switchMap(sortedEntities), distinctUntilChanged(), shareReplay());
     }
 
     private get _noMatch$(): Observable<boolean> {

src/lib/listing/services/entities.service.ts

@@ -30,8 +30,8 @@ export class EntitiesService<E extends IListable, I = E> extends GenericService<
         @Optional() @Inject(ENTITY_PATH) protected readonly _defaultModelPath = '',
     ) {
         super(_injector, _defaultModelPath);
-        this.all$ = this._all$.asObservable().pipe(distinctUntilChanged(), shareReplay(1));
-        this.allLength$ = this._all$.pipe(getLength, distinctUntilChanged(), shareReplay(1));
+        this.all$ = this._all$.asObservable().pipe(distinctUntilChanged(), shareReplay());
+        this.allLength$ = this._all$.pipe(getLength, distinctUntilChanged(), shareReplay());
         this.noData$ = this._noData$;
     }
 

src/lib/listing/services/listing.service.ts

@@ -25,15 +25,15 @@ export class ListingService<E extends IListable> {
         private readonly _searchService: SearchService<E>,
         private readonly _entitiesService: EntitiesService<E>,
     ) {
-        this.displayed$ = this._getDisplayed$.pipe(shareReplay(1));
-        this.displayedLength$ = this.displayed$.pipe(getLength, distinctUntilChanged(), shareReplay(1));
+        this.displayed$ = this._getDisplayed$.pipe(shareReplay());
+        this.displayedLength$ = this.displayed$.pipe(getLength, distinctUntilChanged(), shareReplay());
 
-        this.selected$ = this._selected$.asObservable().pipe(shareReplay(1));
+        this.selected$ = this._selected$.asObservable().pipe(shareReplay());
         this.selectedEntities$ = this._selected$.asObservable().pipe(
             map(() => this.selected),
-            shareReplay(1),
+            shareReplay(),
         );
-        this.selectedLength$ = this._selected$.pipe(getLength, distinctUntilChanged(), shareReplay(1));
+        this.selectedLength$ = this._selected$.pipe(getLength, distinctUntilChanged(), shareReplay());
 
         this.areAllSelected$ = this._areAllSelected$;
         this.areSomeSelected$ = this._areSomeSelected$;
@@ -59,6 +59,8 @@ export class ListingService<E extends IListable> {
             tap(displayed => {
                 this._displayed = displayed;
             }),
+            distinctUntilChanged(),
+            shareReplay(),
         );
     }
 

src/lib/listing/table/table.component.html

@@ -22,7 +22,13 @@
 
 <iqser-empty-state *ngIf="listingComponent.noMatch$ | async" [text]="noMatchText"></iqser-empty-state>
 
-<cdk-virtual-scroll-viewport [class.no-data]="listingComponent.noContent$ | async" [itemSize]="itemSize" iqserHasScrollbar>
+<cdk-virtual-scroll-viewport
+    [class.no-data]="listingComponent.noContent$ | async"
+    [itemSize]="itemSize"
+    [maxBufferPx]="1500"
+    [minBufferPx]="300"
+    iqserHasScrollbar
+>
     <ng-container *ngIf="listingComponent.sortedDisplayedEntities$ | async as entities">
         <div
             (mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
@@ -42,4 +48,8 @@
     </ng-container>
 </cdk-virtual-scroll-viewport>
 
-<iqser-scroll-button *ngIf="hasScrollButton" [itemSize]="itemSize" [scrollViewport]="scrollViewport"></iqser-scroll-button>
+<iqser-scroll-button
+    *ngIf="hasScrollButton && scrollViewport"
+    [itemSize]="itemSize"
+    [scrollViewport]="scrollViewport"
+></iqser-scroll-button>

src/lib/listing/table/table.component.ts

@@ -70,7 +70,7 @@ export class TableComponent<T extends IListable> implements OnInit {
     ngOnInit(): void {
         this.listingComponent.noContent$.subscribe(() => {
             setTimeout(() => {
-                this.scrollViewport.checkViewportSize();
+                this.scrollViewport?.checkViewportSize();
             }, 0);
         });
         this._patchConfig();

src/lib/search/search.service.ts

@@ -1,12 +1,13 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { IListable } from '../listing';
+import { distinctUntilChanged, shareReplay } from 'rxjs/operators';
 
 @Injectable()
 export class SearchService<T extends IListable> {
     skip = false;
     private readonly _query$ = new BehaviorSubject('');
-    readonly valueChanges$ = this._query$.asObservable();
+    readonly valueChanges$ = this._query$.asObservable().pipe(distinctUntilChanged(), shareReplay());
 
     get searchValue(): string {
         return this._query$.getValue();

src/lib/sorting/sorting.service.ts

@@ -5,6 +5,7 @@ import { SortingOption } from './models/sorting-option.model';
 import { SortingOrder, SortingOrders } from './models/sorting-order.type';
 import { KeysOf } from '../utils';
 import { IListable } from '../listing';
+import { distinctUntilChanged, shareReplay } from 'rxjs/operators';
 
 @Injectable()
 export class SortingService<T extends IListable> {
@@ -12,7 +13,7 @@ export class SortingService<T extends IListable> {
         column: 'searchKey',
         order: SortingOrders.asc,
     });
-    readonly sortingOption$ = this._sortingOption$.asObservable();
+    readonly sortingOption$ = this._sortingOption$.asObservable().pipe(distinctUntilChanged(), shareReplay());
 
     get sortingOption(): SortingOption<T> | undefined {
         return this._sortingOption$.getValue();