Ionic-framework: Virtual-Scroll with very big data.

[lujakob]

I am using Ionic2 (beta.11) Virtual-Scroll component to scroll big lists of data. For relatively small amounts (2000 items in array) it works fine. With big amounts of data (50.000 items in array) the scroll works fine in the browser, but get's stuck and works very buggy on the Ionic View Iphone testing.

The way the component works I have to load in all data initially. There is no way to load more data after a certain amount has been scrolled (as in infinite-scroll). As well the component docs say changing the dataset leads to a "reset" of the scroller.

How should this scenario be handled properly ? Anybody has experienced/solutions to handling huge amounts of list data in Ionic2 ?

[WhatsThatItsPat]

I'd recommend not using Ionic View at all in your testing. It's too finicky regarding too many issues to be very useful. It's too limiting, and puts an extraneous layer between your code and your device which creates more opportunities for failure.

You'll waste time hunting down bugs (related to keyboard, local storage, status bar, plugins, etc.) only to find out they weren't bugs to begin with, because your app works as expected when running on a device.

tldr; develop in your browser, skip Ionic View, and go directly to testing on a device.

P.S. Use WKWebView. I've had a couple issues magically disappear by dropping UIWebView.

[jgw96]

Hello @lujakob do you get the same issue when running the app installed on your device? Thanks for using Ionic!

[ghenry22]

Try it out on android, virtual scroll on iOS at the moment is in need of some love in my experience. You could always load the initial data into one array in your JavaScript and then move smaller chunks of data progressively into a second array, implementing in essence your own very simple paging support and then you use infinite scroll on that second array to display with a method that simple copies in the next 500 results or something when you hit the end of the current data

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[martin-g]

Hi,

In my opinion the design of how Virtual Scroll works should be improved.
It should be possible to get the prev/next pages lazily, i.e. with Ajax calls.
If you have a lot of data then the user most probably will never scroll down to the bottom, so there is no need to download everything on the device.

One would suggest to use Infinite-Scroll for this use case, but it doesn't unload the previous items.

The best would be something like Infinite-Scroll component that unloads invisible elements in both directions and has (ionInfinite) for both prev and next.

[lujakob]

Hi @jgw96 ,

we still need a solution for combining the features of virtual scroll with infinite scroll to be able to load data dynamically into virtual scroll as described by margin-g in his comment. On scrolling to the bottom (last elements of virtual scroll), more data should be loaded via ajax request. On scrolling to the top, previous data should be requested via ajax. I think it's not too much work to rework the infiniteScroll to be able to call (ionInfinite) in both directions. In this case a combination of both components could do the job. (this might be a good workaround for now).

I am willing to spend some time on this issue and hopefully find a solution that works well and might be of use for other people. Any contribution appreciated here ? Do you know who I could talk to about my ideas about changing the infiniteScroll/virtualScroll ?

[lujakob]

I have my solution posted on a github repo. Also see here: https://github.com/driftyco/ionic/issues/8037
https://github.com/lujakob/ionic-infinite-scroll-example