Ionic 2 - Not rendering while scrolling

Ionic Framework ionic-v3
1

Hey guys,
I’m having a problem with my Ionic 2 application.

While the users scrolls down, the content is not rendered properly.
Only when the scroll event finishes, the page is displayed correct.
I’m using an ion-row with wrap-Property and about 50 ion-cards inside repeated with ngFor.

Any suggestions how to improve scroll performance?
Thanks in advance!

2

Hi, just suggesting several simple ideas, I’m speaking about Ionic 2 code.

  1. Use a loading controller to make sure everything is loaded before page is loaded, then use some function to actually kill the loader gif (like this.loadingCtrl.dismiss) when all data is loaded to actually display the page (.then is your friend, don’t forget that Ionic is fully Asynchronous and will try to display data in random order UNLESS you tell it not to do so).

  2. Ionic performs better on the view template if everything is well stated (I mean a clean code in the ThisPage.html, this a simple structure, even using ngif* loops). Often page performance issues on the view side, are because of foreign ng code that is not well known by ionic. (follow the recommend structure of a ionic page like on github examples). This might seem totally dumb, but a clean loop with proper header and content on <ion-card> works really faster than a simple <ion-card></ion-card> structure… For example

<ion-list>
<ion-card header>My title</ion-card header>
<ion-card content *ngFor let item of items> 
 this.item 
</ion-card content>
</ion-list>

Works better than a undefined loop with *ngFor with general typings, or *ngFor put on <ion-list>, same with *ngFor put on a <ion-card> with no header and content clearly defined on the view .html file.

  1. You should definitely limit your query to some point, because like I discussed with for example @marc2, at some point some flavours of Android will simply kill the process for being too hungry with memory (Android Huawei flavour). So create a pagination system, and use some form of limit query, aka 10, 20 per page as per you see fit.

Hope it helps :slight_smile:

1 Like