Improving scroll performance !?

I made an app using Angular + Firebase (Cloud Firestore + Storage) to generate a huge list of items with images and some content. I used virtual scroll it was a bit better but not as smooth as I wanted it to be.

Should I implement Infinte Scroll too? Or is there any other way?

This is my code.

TS
someFunc()
{
this.firestore.collection(“coins”)
.snapshotChanges()
.subscribe(data => {
this.coins = data.map(e =>{
return {
id: e.payload.doc.id,
name: e.payload.doc.data()[“name”],
year: e.payload.doc.data()[“year”],
deno: e.payload.doc.data()[“deno”],
quantity: e.payload.doc.data()[“quantity”],
mint: e.payload.doc.data()[“mint”],
price: e.payload.doc.data()[“price”],
front: e.payload.doc.data()[“front”],
back: e.payload.doc.data()[“back”],
frontUrl: e.payload.doc.data()[“frontUrl”],//image url from friebase storage
backUrl: e.payload.doc.data()[“backUrl”],

    };
    
  });

});

}

HTML

<ion-virtual-scroll [items]=“coins” approxItemHeight=“67.274px”>
<ion-item-sliding *virtualItem=“let item”>

  <ion-item lines="full" button="true" (click)="coinDisplay(item)">
    <ion-avatar slot="start">
      <ion-img [src]="item.backUrl" (onload)="imageLoad()"></ion-img>
    </ion-avatar>
    <ion-label>
      <h2>{{item.name}}</h2>
      
      <ion-badge mode="ios" color="dark" style="margin-right: 5px;">{{item.year}}</ion-badge>
      <ion-badge *ngIf="item.mint=='Diamond'" style="padding: 3px;" mode="ios" color="danger"> <img  src="https://www.flaticon.com/svg/static/icons/svg/445/445102.svg" width="15px"  height="13px" style="margin-left:4px;margin-right: 4px;">
      </ion-badge>
      <ion-badge *ngIf="item.mint=='Star'" mode="ios" color="warning"><ion-icon  name="star" color="dark"></ion-icon></ion-badge>
      <ion-badge *ngIf="item.mint=='Dot'" mode="ios" color="primary">  <ion-icon  name="ellipse"  color="dark"></ion-icon>
      </ion-badge>
      <ion-badge *ngIf="item.mint=='Blank'" mode="ios" color="success"><ion-icon style=" font-size: 14px;" name="close-circle-sharp" color="dark"></ion-icon>
      </ion-badge>
    
    </ion-label>
    <ion-icon  name="chevron-forward-outline" slot="end"></ion-icon>
    </ion-item>
 
 

  <ion-item-options side="start">
    <ion-item-option (click)=clear() [routerLink]="['/edit/', item.id]">
      <ion-icon slot="icon-only" name="pencil-outline"></ion-icon>
    </ion-item-option>
    
  </ion-item-options>

  <ion-item-options side="end">
    <ion-item-option color="danger" (click)="delete(item.id,item.front,item.back)"> 
      <ion-icon slot="icon-only" name="trash"></ion-icon>
    </ion-item-option>
    
  </ion-item-options>
</ion-item-sliding>

1 post - 1 participant

Read full topic