<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]="!loading && items && items.length === 0 ? 'block' : 'none'"
>
  <ion-label class="centeredMessageContainer">
    {{ 'search.nothing_found' | translate | titlecase }}
  </ion-label>
</div>
<ion-list [style.display]="loading ? 'block' : 'none'">
  <stapps-skeleton-list-item
    [hideThumbnail]="singleType"
    *ngFor="let skeleton of [].constructor(skeletonItems)"
  ></stapps-skeleton-list-item>
</ion-list>
