I have a page where I show some external images, loaded on demand from different web servers. It is a kind of search result page and for each result item one external image is shown.
After retrieving the search result from the backend and before the result is shown, it takes quite some time before the page content is shown. Then all search result items are shown at once. In the meantime only the page background is shown. During this time, I can see the scroll bar moving or getting smaller - so the rendering is in progress, the sizes are calculated for each result element, event the elements which are not visible without scrolling.
On a typical mobile device, 2 or 3 result items fit on the screen. I would like to have these items visible as soon as possible and having the rendering of the other items which are not within the viewport delayed. Is this possible and how?
I must confess, it is quite hard to describe my question - please ask for details if I need to explain something in more detail.
Sounds like you want to use either a virtual scroll component like React Table or if your content is images only (though not sure why this would hold up the rendering), a lazy image loading component like this.