Almost infinite loader

When registering 10,000s of new DOM elements in the component the React event-loop becomes irresponsive. React virtualized is great, but mostly for tabular data where row heights are known and you have millions of items.

We now use a very simple approach to render list items:

{ paged.content.map((e) => (
 <Something key={ e.key } />
) ) }

New approach

Implement a new component ForeverLoader that will be used like this:

const renderItem = (item) => <DescriptorCard descriptor={ item } />;

<ForeverLoader paged={ paged } loadPage={ loadDescriptors }
   itemRenderer={ renderItem } 
   loadingIndicator={ <Loading /> }
/>

The ForeverLoader would initially take the paged.content list and use the itemRenderer function to add those elements to DOM.

When the user scrolls closer to the end of the rendered list (how do we detect that?), the loader loads the next page of data and adds those items to the DOM. That takes care of the React's event-loop (I hope), but memory use on the client side will be significant.

Implementation

The loader needs to keep track of current items[] and also the pageSize and current page number.
Loader "detects" that the user is scrolling towards end of available items[] and makes the API call for the next page.
Whenever api call is in progress, the loadingIndicator is displayed as last element.