Virtual Scroll filtering causes a lot of flicker and performance degradation

Ionic version: (check one with “x”)
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x

I’m submitting a … (check one with “x”)
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Have a list of item rendered by a virtual scroll component. Filtering the list using a search box causes flickering and unnecessary component destruction.
Virtual scroll destroys rendered elements and recreates them when rendered list is altered resulting in a lot of flicker.

Also this is a trivial example, in real life components have initialization and cleanup logic that make this a whole lot worse in an actual application causing an overall performance degradation.

Expected behavior:

The list should be updated without items being destroyed and recreated with every search/filtering.

Steps to reproduce:
http://plnkr.co/edit/HkabOvdtRiOJ8kHmOVE2?p=preview
Search for a number… any number! Nah, kidding. Search for a number then search again, notice the flickering. In order to appreciate the magnitude of this has on an actual device, turn Chrome’s CPU throttling to 10x and notice the behaviour.

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

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

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

Author: Fantashit

2 thoughts on “Virtual Scroll filtering causes a lot of flicker and performance degradation

Comments are closed.