Ionic-framework: VirtualScroll does not work with Immutable.List

Created on 1 Sep 2016  路  3Comments  路  Source: ionic-team/ionic-framework

Short description of the problem:

Trying to replace *ngFor="let item of items" with virtualScroll alternative does not render any item (nothing added in the dom) or each virtualItem is empty if items is an Immutable.List. Immutable.List is enumerable and thus works fine with ngFor and since angular2 and immutability work so well together I believe this should work.

What behavior are you expecting?

Render items of an immutable list correctly

Which Ionic Version? 1.x or 2.x
Ionic 2 Beta 11

Plunker that shows an example of your issue

http://plnkr.co/edit/2c5ZIyDyGb12kwtQ4jXW?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
ios-deploy version: 1.8.6
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.3.1
Xcode version: Xcode 7.3.1 Build version 7D1014

stale issue

Most helpful comment

To add to this issue, after RC0 that angular final was used, providing an array of immutable objects into VirtualScroll leads to severe performance degradation as VirtualScroll does its own change detection triggering which leads to a deep comparison (through devModeEqual) of the immutable objects that is just taking crazy amounts of time.
I believe VirtualScroll should be compatible with the OnPush change detection strategy in order to support immutable objects.

UPDATE 20/04/17:
I believe that this is no longer the case, as item comparisons are using Angular4.0 diff comparisons that account for immutable items, but List enumerations issues inside Virtual Scroll still remain unchanged.

All 3 comments

To add to this issue, after RC0 that angular final was used, providing an array of immutable objects into VirtualScroll leads to severe performance degradation as VirtualScroll does its own change detection triggering which leads to a deep comparison (through devModeEqual) of the immutable objects that is just taking crazy amounts of time.
I believe VirtualScroll should be compatible with the OnPush change detection strategy in order to support immutable objects.

UPDATE 20/04/17:
I believe that this is no longer the case, as item comparisons are using Angular4.0 diff comparisons that account for immutable items, but List enumerations issues inside Virtual Scroll still remain unchanged.

This is still an issue on latest Ionic (v3.0.1) and here is an updated plunker demonstrating the issue once more.
http://plnkr.co/edit/2Pz0fIX9MV7er12UaFRf?p=preview

Our app uses immutable sets and lists everywhere, but due to the fact that we have to display 1000s of records in a scrollable list, we have to use virtual scroll. This requires that all data is converted back to mutable objects (very costly) and all the components used inside the virtual scroll have to accept mutable objects as well.
This way we are sort of trapped as we have to use virtual scroll for better performance, but we are degrading performance due to trying to be compatible with virtual scroll.

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

brandyscarney picture brandyscarney  路  3Comments

daveshirman picture daveshirman  路  3Comments

Nick-The-Uncharted picture Nick-The-Uncharted  路  3Comments

MrBokeh picture MrBokeh  路  3Comments

BilelKrichen picture BilelKrichen  路  3Comments