Virtual Scroll filtering causes a lot of flicker and performance degradation

[masimplo]

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

[jgw96]

Thanks for using Ionic, we will look into this.

[trebor678]

+1

[JustasKuizinas]

+1

[manucorporat]

fixed! 88b2e83

[Muneem]

i am still getting this flickering issues

[masimplo]

@Muneem the PR has been merged to master but has not been released in version yet. Are you using master?

[Muneem]

i am using default virtual scrolling which comes with ionic. How to use master ?

[masimplo]

I would recommend that you wait the next release of ionic either 3.7.2 or 3.8 it should be coming soon. Working with the master is just asking for trouble if you don't know what you are doing. Point is that you still see flicker because you are not using the latest version of the code that has the fix in it, as it is not officially released yet.

[Muneem]

Yes this is what i was asking. How can i use that fixed version of code as i need this urgent and cant wait for next release... Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: Michael Asimakopoulos <notifications@github.com> Sent: Thursday, October 12, 2017 12:06:45 AM To: ionic-team/ionic Cc: Muneem; Mention Subject: Re: [ionic-team/ionic] Virtual Scroll filtering causes a lot of flicker and performance degradation (#12035) I would recommend that you wait the next release of ionic either 3.7.2 or 3.8 it should be coming soon. Working with the master is just asking for trouble if you don't know what you are doing. Point is that you still see flicker because you are not using the latest version of the code that has the fix in it, as it is not officially released yet. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#12035 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AGRcTEvRh06-J4qOCsmPUELdAbku8M7aks5srR_VgaJpZM4N5NW3>.

[masimplo]

npm install --save ionic-angular@nightly

[kensodemann]

To make that slightly more safe, you may want to do this:

npm i ionic-angular@3.7.1-201710101557 --save --save-exact

That will get you the current RC. We are still working through some issues, which means the nightly could get updated at any time, which means that ionic-angular@nightly could become more fixed or more broken at any time.

[daneuchar]

how do i switch from nightly build to stable ionic-angular

[kensodemann]

I always just manually change my package.json and then npm i

but... you can also just do this:

npm i ionic-angular@latest --save --save-exact

Of course, if you adjusted your Angular versions when you installed the nightly, you will have to back those down too.

[kensodemann]

On a side note, another thing I will typically do if testing out something like a patch or a nightly build is just create a branch for it:

git checkout -b test/ionicAngularNightly

then I can just switch back and forth between that branch and whatever other branches I have other development going on it and all I have to do is remember to do npm i each time to get the right modules in there.

Plus, it makes it easy to test with newer stuff that may have been merged into master in the meantime since all I have to do then is rebase my testing branch, etc.

git rocks for this kind of stuff

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.