Consider splitting instance removals / insertions into batches

[MaKleSoft]

Stamping out large lists can lock up an app for quite some time. This is problematic if you want to

a) Display at least part of the list as fast as possible
or
b) Do some other stuff while rendering the list, like showing an animation

In order to keep apps responsive even during large list updates, I wonder if it would be possible to split instance insertions and removals into smaller badges and deferring them to subsequent frames using requestAnimationFrame or setTimeout. I understand that this could lead to some race conditions but perhaps that could be addressed with some sort of scheduler that acts across updates?

Not sure if it's worth the extra complexity but if done right this could be quite a big deal for performance.

[jmesserly]

some ideas:

• use https://github.com/Polymer/core-list, which renders lazily
• point <template repeat> at a list which you slowly populate

I've personally used the latter, since core-list didn't exist yet.

I understand that this could lead to some race conditions but perhaps that could be addressed with some sort of scheduler that acts across updates?

Yeah, I think that's the key issue. <template repeat> guarantees it will do updates atomically. I can't see how we can relax that without too much breakage. Also, I think the element or application will typically have more knowledge of heuristics than something very generic like <template repeat>

Hmm, maybe we could do a filter like <template repeat="{{ myItems | lazyLoad }}">. There has been talk of live array views & this seems like it could be built on the same mechanism.