Can this library provide support for infinite scrolling ?

[paulvanbladel]

A canonical example in an app is loading more data when the user reaches the bottom of the page.
Can the ui-virtualization lib provide this service?
thanks.

[EisenbergEffect]

That is one of the use cases, but it hasn't been fully implemented yet.

[heruan]

It would be very interesting to see it an action for infinite scrolling of tables and lists! 👍

[rquast]

+1 - My most wanted feature in Aurelia at the moment.

[rquast]

I have a hunch this won't be too hard to implement. I'll give this and the scroll position issue a go in my fork.

[rquast]

Added infinite scroll support to my fork: https://github.com/rquast/ui-virtualization/commit/5ab12e084ee17c3faaa8dc43dab6ad316f5b335c

Just implement either loadTop() or loadBottom() in your view model/custom element like this...

loadBottom() {
this.bindingContext.$parent.addItems(100); // this is based on the phone-list.js example
}

Also use splice rather than push for modifying arrays (I don't know if that's fixed now or not?).

[Wyzix33]

Hi, this would be a very useful feature (virtual-scroll), looking forward to it :) it would be nice to be able to use different heights for rows and be able to see full scroll height from the beginning, and also to be able to load all data into a object for faster rendering instead of many requests based on scroll height (optional). Thank you for your work!

[unt1tled]

+1

[Daniel-Glucksman]

+1

[JSeligsohn]

+1

[TheBerleyman]

+1 This, along with horizontal lists, would be quite helpful for a current project.
Looks like I have to roll my own, for now.

[AStoker]

@TheBerleyman: #59 for horizontal scrolling

[AStoker]

Made a pull request for basic infinite scroll support. I'd appreciate feedback: #71

[rquast]

👏 well done! 👍

[rquast]

@martingust Did you rebuild dist after adding this? Doesn't look like its in there (just trying it out now).

[AStoker]

It's there @rquast https://github.com/aurelia/ui-virtualization/blob/master/dist/amd/virtual-repeat.js#L327
Where are you looking? Have you gotten the latest release?

[rquast]

my package.conf
"aurelia-ui-virtualization": "^1.0.0-beta.1.0.2",

I did a grep on the repeat-next and RepeatNext in dist

rquast@zion:~/WebstormProjects/cavy-client/node_modules/aurelia-ui-virtualization/build$ grep -r 'repeat-next' *
reports/coverage/html/src/virtual-repeat-next.js.html:    <title>Code coverage report for src/virtual-repeat-next.js</title>
reports/coverage/html/src/virtual-repeat-next.js.html:      <a href="../index.html">all files</a> / <a href="index.html">src/</a> virtual-repeat-next.js
reports/coverage/html/src/virtual-repeat-next.js.html:var VirtualRepeatNext = exports.VirtualRepeatNext = (_dec = (0, _aureliaTemplating.customAttribute)('virtual-repeat-next'), _dec(_class = function () {
reports/coverage/html/src/virtual-repeat.js.html:          var getMoreFunc = _this5.view(0).firstChild.getAttribute('virtual-repeat-next');
reports/coverage/html/src/index.html:   <td class="file high" data-value="virtual-repeat-next.js"><a href="virtual-repeat-next.js.html">virtual-repeat-next.js</a></td>
rquast@zion:~/WebstormProjects/cavy-client/node_modules/aurelia-ui-virtualization/build$ pwdandal Project/aurelia/ui-virtualization/src/virtual-repeat-next.js
/home/rquast/WebstormProjects/cavy-client/node_modules/aurelia-ui-virtualization/build
rquast@zion:~/WebstormProjects/cavy-client/node_modules/aurelia-ui-virtualization/build$ grep -r 'RepeatNext' *
reports/coverage/html/src/virtual-repeat-next.js.html:exports.VirtualRepeatNext = undefined;
reports/coverage/html/src/virtual-repeat-next.js.html:var VirtualRepeatNext = exports.VirtualRepeatNext = (_dec = (0, _aureliaTemplating.customAttribute)('virtual-repeat-next'), _dec(_class = function () {
reports/coverage/html/src/virtual-repeat-next.js.html:  function VirtualRepeatNext() {
reports/coverage/html/src/virtual-repeat-next.js.html:    _classCallCheck(this, VirtualRepeatNext);
reports/coverage/html/src/virtual-repeat-next.js.html:  VirtualRepeatNext.prototype.attached = function attached() {};
reports/coverage/html/src/virtual-repeat-next.js.html:  VirtualRepeatNext.prototype.bind = function bind(bindingContext, overrideContext) {
reports/coverage/html/src/virtual-repeat-next.js.html:  return VirtualRepeatNext;
reports/coverage/lcov/report-lcovonly.txt:FN:15,VirtualRepeatNext
reports/coverage/lcov/report-lcovonly.txt:FNDA:290,VirtualRepeatNext

[AStoker]

So then what isn't working?

[rquast]

Sorry.. my bad.. I was in the wrong directory. I just can't get it to fire getMore (from the example).

[AStoker]

Can you post a snippet of what you're trying to do? There's a current issue where it can only call the function referenced in the virtual-repeat-next attribute if that function is in the same context as repeat binding.

[rquast]

    <div>
      <div style="overflow: scroll; height: 30px;">
        <div virtual-repeat.for="item of items" virtual-repeat-next="getMore()">
          ${$index} ${item}
        </div>
      </div>
    </div>

    <button click.delegate="addMore()">Add more</button>

The add more works, but getMore doesn't when it scrolls. I put in a few extra divs because I know virtual repeat needs containers.

[AStoker]

Nix the () in the attribute

[rquast]

Yeah I originally didn't have it.. added that to try just in case.

[AStoker]

This infinite scroll implementation is a bit limited, I would definitely classify it as a first draft. We needed it for our application, so we got the bare minimum in there to start it off. It would be great to have some more features for this.

[rquast]

#74 - will leave it there for now since things work on my side with that patch. Either my code there doesn't work properly (which I think it does), or the test is broken for fixed height containers. If I get some time, I'll look into it some more.

[gregorydickson]

In the past I have used Infinity from AirBnb and loved it's capability to free up resources as items paged off of the screen (http://airbnb.io/infinity/). I have built a couple of js apps where I needed to scroll through 10k-50k images or cards (image with some text). I finally hit the limit on what a javascript array could handle and started hacking infinity.js to have it use a better data structure but then my use case ended up not needing such a large list of items.

Most "infinite" scroll solutions keep the items in the DOM and eventually the browser slows to a crawl. I am not really experienced enough in js or Aurelia and my first app that I am building in Aurelia right now doesn't need this but I do have one coming down the pike......

would love an advanced infinite scroll built into Aurelia. I think that this could be a big factor in the Angular/Aurelia shootout. IMHO.

[EisenbergEffect]

@gregorydickson You are in the right place to see that.
@martingust How are things looking in terms of features and stability? What would you say is left to do for v1?

[gregorydickson]

ahh, just noticed, thanks!!!!!! my bad for not RTFM.

[AStoker]

@gregorydickson, we're using this plugin in production and have tested it with over 100k items, so it's definitely good to go DOM wise. What we've noticed (however) is that older devices that don't quite have the memory start to struggle with JS arrays that go beyond 150k (crashing and the such).
I'm thinking for future features, having the ability to actually start removing elements from the source array so that you don't have JS managing an exorbitant amount of data. This would also "resolve" one of the issues we have with dealing with maximum browser heights (upwards of the 2 million pixel heights) by not having that many buffer elements to deal with. This would mean that we would need to improve upon the infinite scrolling functions such that it works in the opposite direction of the original scroll, but that shouldn't be too complicated.
Just giving you some of the details of what we're doing in production (so you can be at least a bit more confident), and some ideas for the future.

[gregorydickson]

@AStoker nice!!!! thanks for the info.

[ajayvikas]

If I can chime in here, I find aurelia-virtualization to be very useful. One thing I am not comfortable is that it uses timer firing every 500 ms. This is something I would like to avoid in our app. As I understand the timer is needed in some special cases. If those cases are not needed in normal situations, I would suggest this is made as opt-in feature for those special situations.

[AStoker]

@ppN2, I understand the desire to not have a timeout firing that frequently. As of right now it is needed to help catch cases where the repeater is hidden initially, or if the user scrolls faster than the JS can render items (in which case it helps in the catch up). Not sure if either of those situations could be refactored into options... But If you have an idea on how to handle those two situations without a timeout, I would love to hear them. Every time I see a timeout, red flags typically go up in my head :)

[gregorydickson]

I just implemented this on my app. It rocks!!!! Thanks: @AStoker @EisenbergEffect