refactor: optimize data list component

src/app/modules/data/list/data-list.component.ts

@@ -42,7 +42,7 @@ export class DataListComponent implements OnChanges, OnInit {
   /**
    * Output binding to trigger pagination fetch
    */
-  @Output('loadmore') loadMore = new EventEmitter<DataSourceRefreshed>();
+  @Output('loadmore') loadMore = new EventEmitter<void>();
   /**
    * Emits when scroll view should reset to top
    */
@@ -66,15 +66,9 @@ export class DataListComponent implements OnChanges, OnInit {
   }
 
   // tslint:disable-next-line: completed-docs
-  ngOnChanges(_changes: SimpleChanges): void {
-    if (Array.isArray(this.items)) {
-      if (this.itemStream.getValue().length === 0) {
-        this.itemStream = new BehaviorSubject<SCThings[]>(this.items);
-      } else {
-        if ((this.items[0].uid ?? '') !== this.itemStream.getValue()[0].uid) {
-          this.itemStream = new BehaviorSubject<SCThings[]>(this.items);
-        }
-      }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (Array.isArray(this.items) && typeof changes.items !== 'undefined') {
+      this.itemStream.next(this.items);
     }
   }
 
@@ -98,19 +92,15 @@ export class DataListComponent implements OnChanges, OnInit {
    * Component proxy for dataSource.finishedLoadMore
    */
   notifyLoadMore() {
-    this.loadMore.emit((items) => {
-      this.itemStream.next(items);
-    });
+    this.loadMore.emit();
   }
 
   /**
    * Function to call whenever scroll view visible range changed
    */
-  scrolled(_event: Event) {
+  scrolled(_index: number) {
     if ((this.items?.length ?? 0) - this.viewPort.getRenderedRange().end <= (this.items?.length ?? 0) * this.reloadThreshold) {
       this.notifyLoadMore();
     }
   }
 }
-
-export type DataSourceRefreshed = (items: SCThings[]) => unknown;

src/app/modules/data/list/data-list.html

@@ -1,10 +1,12 @@
-<cdk-virtual-scroll-viewport itemSize="80" minBufferPx="1500" maxBufferPx="2000" (scrolledIndexChange)="scrolled($event)"
-                             [style.display]="items && items.length ? 'block': 'none'">
-  <ion-list>
-    <stapps-data-list-item *cdkVirtualFor="let item of itemStream;trackBy: identifyItem" [item]="item"
-                           [hideThumbnail]="singleType"></stapps-data-list-item>
-  </ion-list>
-</cdk-virtual-scroll-viewport>
+<ng-container *ngIf="itemStream | async as items">
+  <cdk-virtual-scroll-viewport itemSize="80" minBufferPx="1500" maxBufferPx="2000" (scrolledIndexChange)="scrolled($event)"
+                               [style.display]="items && items.length ? 'block': 'none'">
+    <ion-list>
+      <stapps-data-list-item *cdkVirtualFor="let item of items;trackBy: identifyItem" [item]="item"
+                             [hideThumbnail]="singleType"></stapps-data-list-item>
+    </ion-list>
+  </cdk-virtual-scroll-viewport>
+</ng-container>
 <div [style.display]="items && items.length === 0 ? 'block': 'none'">
   <ion-label class='notFoundContainer'>
     {{'search.nothing_found' | translate | titlecase}}

src/app/modules/data/list/search-page.component.ts

@@ -29,7 +29,6 @@ import {ContextMenuService} from '../../menu/context/context-menu.service';
 import {SettingsProvider} from '../../settings/settings.provider';
 import {DataRoutingService} from '../data-routing.service';
 import {DataProvider} from '../data.provider';
-import {DataSourceRefreshed} from './data-list.component';
 
 /**
  * SearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -225,10 +224,9 @@ export class SearchPageComponent implements OnInit {
    * Loads next page of things
    */
   // tslint:disable-next-line:no-any
-  async loadMore(finished: DataSourceRefreshed): Promise<void> {
+  async loadMore(): Promise<void> {
     this.from += this.pageSize;
     await this.fetchAndUpdateItems(true);
-    finished(await this.items);
   }
 
   /**

src/app/modules/data/list/search-page.html

@@ -15,5 +15,5 @@
 </ion-header>
 
 <ion-content>
-  <stapps-data-list id="data-list" [items]="items | async" [singleType]="singleTypeResponse" (loadmore)="loadMore($event)" [resetToTop]="queryChanged.asObservable()"></stapps-data-list>
+  <stapps-data-list id="data-list" [items]="items | async" [singleType]="singleTypeResponse" (loadmore)="loadMore()" [resetToTop]="queryChanged.asObservable()"></stapps-data-list>
 </ion-content>