VirtualList efficient async content updates

Hello,

We have a requirement for a VirtualList to be connected to a collection a large number of items. We have a non-trivial renderer for each item and we receive a high frequency of updates to the items from the server.

We are looking for the most efficient way to handle this - when an asynchronous update arrives from the server, we want to update the renderer as quickly as possible, but ideally only if that renderer is in view. For others, as they come into view, we need the renderer to access the most recent data and then receive updates, as they arrive. Conversely, we need to know when not to update a renderer, if it is not in view.

Is there a recommend pattern for achieving the above?

I would have hoped that VirtualList would have taken care of this automatically based on using refreshItem on the data provider but it seems like that’s not the case. VirtualList runs renderer even if item is not in view · Issue #8432 · vaadin/flow-components · GitHub

The workaround that I can think of is that you manually keep track of which items are in view by listening to attach and detach events from the rendered components and then use that to filter your events.

Thanks, Leif.

We have been loooking into whether

virtualList.getDataCommunicator().isItemActive( item ) can help us here?

We will run a comparison on this vs attach/detach - but would you know if isItemActive is meant to do what we are looking for?

Running a quick test, it would appear isItemActive is only true when the renderer is attached

That’s a good find! isItemActive should be 1:1 with whether the corresponding component is attached or detached.