Infinite Loader

[vgoklani]

🙋 Feature Request

Would it be possible to use this in an infinite loader setting? This would mean the following:

1. Should display rows from a streaming API (think WebSocket) where new rows would be added on top.
2. Manages the DOM by controlling the number of rows displayed on the device. More specifically, this would include add/removing row elements from the DOM at both the top and bottom as the user scrolls
3. Efficiently manage memory

[reidbarber]

Collection components support dynamic data, asynchronous loading, and infinite scrolling. Lists are virtualized, which should satisfy your efficient memory management item.

For the streaming use case you're describing, as you receive events, you can prepend/append items with useListData.

[vgoklani]

Thanks for the response @reidbarber

Do you have an example that we can test? Something in a CodePen, etc?

thanks!

[reidbarber]

Here is a TableView with 10,000 rows: https://codesandbox.io/s/tableview-with-10-000-rows-bxh1lc?file=/src/App.tsx

Since your use case is dependent on an active server, I can't really include that in a sandbox, but you'll just want to listen for when events are emitted, and use list.prepend() to add new items to the beginning of the list.

React Aria includes useTable and useGridList to implement your own, and you can check the repo to see how React Spectrum uses the hooks for TableView and ListView.

[snowystinger]

Or you can look at the docs for things like lists/tables etc
Here's Async loading thousands of items as well https://react-spectrum.adobe.com/react-spectrum/ListBox.html#asynchronous-loading