Tab with list performance issue

Ionic Framework ionic-v3
1

Hey there, i have an app with 2 tab pages - first page map with markers and and the sconed page is a list.
The list contains something around 400 items, and i have performance issue when im switching to the list page.

At the first time its taking something about 5 seconds (that’s after i have the items in the component), and after that its about 2-3 seconds of rendering when im switching to the list tab.

This is the list page:

<ion-header>
  <ion-navbar>
    <ion-title>
      List
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-list [virtualScroll]=“list”>
<ion-card *virtualItem=“let rest”>
<ion-img [src]=“rest.url”>




<ion-item>
  <ion-icon name="wine" item-left large ></ion-icon>
  <h2>{{rest.name}}</h2>
  <p>{{rest.address}} {{rest.city}}</p>
</ion-item>

<ion-item>
  <button ion-button icon-left clear item-right>
    <ion-icon name="navigate"></ion-icon>
    Start
  </button>
</ion-item>
```

I’ve tested it on my phone - LG G3 and some other devices, results were the same.
Adding here the ionic info:

global packages:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : android 6.2.3
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v8.0.0
OS         : Windows 7
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed

Thank you for ur answer.

2

How tall are your items?

3

Something around 170px.

4

Docs say:

If the height of items in the virtual scroll are not close to the default size of 40px, it is extremely important to provide an value for approxItemHeight height.

5

@daniel_amram I read a good solution on the forum for this kind of InfiniteScroll, with a well-built class loading large chunks of data, only on demand while scrolling. Unfortunately, I don’t remember the topic. Not sure it will fit your need, but you can dig a bit in the forums with “InfiniteScroll” keyword.