Improving scroll performance !?

Ionic Framework Ionic Angular
1

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>
2

Hi @ChetanRaj0428,

One thing I would recommend trying first is using Angular’s CDK Virtual Scroll feature. We are moving to preferring framework-specific solutions to virtual scroll over our own ion-virtual-scroll.

We are working on docs for this feature, but I would suggest taking a look at this doc for how you would use it in Ionic: https://github.com/ionic-team/ionic-docs/pull/1406/files#diff-fc5f44d3f4d707327b9a6732614d265953c7871e05403c01a81b4498e3d1105c

And then take a look at the Angular CDK docs for more info: https://material.angular.io/cdk/scrolling/overview

Please give that a try and let us know if that improves things for you. CDK Virtual Scroll is a higher performance component that ties more deeply into Angular than our component.

2 Likes
3

Hey @max, thanks a lot! It worked the scrolling is smoother than ever. Now i just have to figure out how to cache the images from firebase storage so that my read limits don’t exceed my firebase quota.

1 Like
4

Great to hear it! We will be making this easier to find on the docs soon.