Ionic version: (check one with “x”)
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.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/
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.
The list should be updated without items being destroyed and recreated with every search/filtering.
Steps to reproduce:
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.
insert any relevant code here
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