vue-virtual-scroller icon indicating copy to clipboard operation
vue-virtual-scroller copied to clipboard

Support lazyloaded data

Open pbaern opened this issue 3 years ago • 2 comments
trafficstars

Clear and concise description of the problem

I want to be able to use the virtual scroller with a large number of items without providing a list of all these items. In other words, I want to have the possibility to simulate a larger number of items than the length of the items array given as a property by using "empty" items for the ones which are not provided.

With this it would be possible to lazyly load the data by using the onUpdate event appropriately without having to create a large array containing mostly empty items. In particual, the performance of the scroller would no longer depend on the total number of items.

Suggested solution

E.g., I would suggest the following additional properties:

  • numItemsAbove: The number of empty items above the first item in the property items
  • numItemsBelow: The number of empty items below the last item in the property items
  • emptyItem: An item similar to the items in items (without an id) which is used to create the views of empty items

The size of the empty items could be taken from the itemSize if it is not null and from the size of the emptyItem or the minItemSize if not.

Alternative

No response

Additional context

As a proof of concept I already created a patch starting from version 1.1.2 of the Recycle Scroller which supports these features but only when using the following other parameters:

  • itemSize: null
  • the size of the empty items is taken from the minItemSize
  • keyField: "id"

If asked for, I would be very happy to help further developing this feature (also for the latest version of the repo).

Validations

  • [X] Read the docs.
  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

pbaern avatar Nov 09 '22 11:11 pbaern

I think you can already do this using the befoare and after slot, with a div on which on apply the size you want (for example itemSize * itemCount).

Akryum avatar Dec 14 '22 10:12 Akryum

That was my first approach, too, but it comes with the obstacle that it is then no longer possible to use the update event for loading the correct next part of the data, since it will simply give e.g. startIndex=0 above the loaded columns. It would also be super helpful to be able to display empty rows/rows with a loading animation which can be scrolled virtually just like the loaded rows.

pbaern avatar Dec 14 '22 10:12 pbaern