Optimize ngFor in Ionic when page is loading too many data

Question

currently I'm working on an Ionic page which get data from an API, roughly 50,000 items and save them in selectedItem (array). I have to list them all like this:

<ion-list class="main-item-container">
    <ion-item *ngFor="let item of selectedItem; trackBy: trackSelectedItem">             
       // Stuff here (item's thumbnail, title ...    
    </ion-item>
</ion-list>

I have applied the <ion-infinite-scroll> at the end of the list, used the trackBy function as suggested in here

But the problem is just slightly solved. The page is still suffered from lags and delays for about 1sec on computer and 2sec on tablet devices, even happends when I toggle the Menuside.

Question is: Is there any other way to improve this situation? I can think of one way data-binding items to those list, so perhaps the page will ignore the list once data is binded.

Can anyone suggest me a solution?

Answer 1

You can use an Infinite scroll or virtual scroll

Here are the links:

Infinite scroll

Virtual Scroll

confused between which one to choose? here is the solution