Ion list performance slow for large data

Ionic Framework ionic-v3
1

Hi, i think this issue is more for the *ngFor directive, as we try to display large items in a list, this takes some time to instantiate the dom elements that will hold the values of the variables, ngMaterial had a way to deal with it with virtual-repeat but i think the code isn’t compatible with angular 2, ionic 1 has some sort of solution to this inside their ion-list directives, and even angular 1 had something to deal with it with the track-by filter or something.

Will ionic 2 make something soon about this performance issue? i’m getting at least 5 sec delay while it shows a simple list with 240 items with just a name.

2

try to use infinite scroll or collection-repeat, otherwise you can create your list with one way binding if you don’t need to update this list later.

Do you bind for each item an event as such as click?

3

Yes i do bind a click, also infinite scroll is from ionic or is a third party library, what about collection-repeat, i didn’t see it in the component docs?

4

http://ionicframework.com/docs/api/directive/collectionRepeat/

Please show me how you create an event click,i mean if you bind click event for each element or you have a global click.

5

I have 1 click event for each element, looking in collection repeat, it is in the docs for ionic 1, is it available in ionic 2? Heres part of my template:

<ion-content padding class="masters">

  <ion-list inset>
    <ion-item *ngFor="#reference of references">
      <p item-left>{{reference.value}}</p>
      <p item>{{reference.name}}</p>
    </ion-item>
  </ion-list>
</ion-content>
6

There’s a ListVirtualScroll class inside the list component folder, but i can’t figure out how to use it, i think i have to require it and pass the ion-list component to the constructor, but without docs for it idk:
https://github.com/driftyco/ionic2/blob/master/ionic/components/list/virtual.ts

7

So virtual Scrolling (the new name for collection repeat) is still a WIP.

8

2 Questions:

  1. Which state of wip, still in dev, testing?, is it ready enough to try to use and reduce that freeze time?
  2. I have another ion-list inside a multiline template in a popup with 5 items, the directives item-left and item-right doesn’t work there, is it fault of popup, ES6 template string or mine using ion-list in a weird context?
this_ref.showAlert({

      title: 'Cumplimiento ruta',
      template: `
      <ion-list inset>
        <ion-item>
          <p item-left>Potencial</p item>
          <p item-right>: ${potencial}</p item>
        </ion-item>
        <ion-item>
          <p item-left>Meta hoy</p item>
          <p item-right>: ${metaHoy}</p item>
        </ion-item>
        <ion-item>
          <p item-left>Ventas hoy</p item>
          <p item-right>: ${ventasHoy}</p item>
        </ion-item>
        <ion-item>
          <p item-left>Falta</p item>
          <p item-right>: ${falta}</p item>
        </ion-item>
        <ion-item>
          <p item-left>Cumplimiento</p item>
          <p item-right>: ${cumplimiento} %</p item>
        </ion-item>
      </ion-list>
      `
    })

This is the function that uses the args above to instantiate a popup:

showAlert(args) {

  this.closeDialog();
  args.title = args.title || 'Error obteniendo datos';
  args.subTitle = args.subTitle || '';
  args.template = args.template || '';
  this.dialog = true;
  return this.popup.alert({
    title: args.title,
    subTitle: args.subTitle,
    template: args.template,
    cssClass: 'alert',
    okText: 'Cerrar',
    okType: 'primary'
  });
}
9
  1. Still in dev
  2. Make a repo to look at. Hard to figure out the issue when just looking at snippets of code and not the whole picture.
10

It’s a private repo in bitbucket, not allowed to show a lot of the code, had to use custom styles with width and floats :frowning:

11
  1. Is it functional? even if in dev could i use it to improve at least a bit the performance? if so how?
12

Custom styles are not relevant.
Even if you could replicate the issue in a smaller repo, that would be helpful.
It’s not functional yet. Few other more important things to work on before that.

13

Tonight i will try to make a plunker to replicate the issue.
Update: Since update to alpha.42 which uses angular alpha.52 the ngFor directive works a lot better, still with 240 records there’s a noticeable lag of 1 sec aprox.