Virtual scroll flickering when we update it with new data

Bug Report

Ionic version:

[x] 4.0.0

Current behavior: We’ve a scenario in our app. We load the cached data from the local store and when we receive the latest data from server, we will update the list.

So when we’re doing this, the page is flickering when update happens. I understand that when we set the data it may flicker, but trackBy option should solve this, which is not happening.

Expected behavior: It should not flicker when we update the list with the latest data.

Steps to reproduce: Add a viritual-scroll to a page and initialize with some items and update the list with new set of data.

Related code:

https://github.com/roopeshreddy/virtual-scroll-issue

<ion-virtual-scroll [items]="items" [trackBy]="trackByFn">
    <ion-item *virtualItem="let item">
      <ion-icon [name]="item.icon" slot="start"></ion-icon>
      {{ item.title }}
      <div class="item-note" slot="end">
        {{ item.note }}
      </div>
    </ion-item>
  </ion-virtual-scroll>

Other information:

We’ve tried the same in Chrome browser, iOS simulator and real iPhone 7 device.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

System:

   NodeJS : v10.15.0 (/usr/local/bin/node)
   npm    : 6.5.0
   OS     : macOS Mojave

[gartorware]

Same problem here. As a solution I have set the itemHeight function, so the virtual scroll is not flickering any more.

In my particular case it was easy since all my items have the same height: HTML:

<ion-virtual-scroll [items]="items" [trackBy]="trackByFn
approxItemHeight="52px" [itemHeight]="itemHeightFn">
   ...
</ion-virtual-scroll>

TS:

...

itemHeightFn(item, index) {
    return 52;
}

Now only the headers are flickering…

[9i0xin9]

I just found a work around for the flickering header. I was checking the css and during the loading part a class .virtual-loading is assign to ion-item-divider element. Forcing the class with a state of opacity: 1 did the trick.