I'm building a Lightning component that shows a long list of items. Each of them is represented by another custom lightning component. In order to provide the best possible user experience, I would like to load some number of rows and then subsequently append additional rows over time. Of course I could implement paging, but that is not a fantastic user experience, and I'm looking for a better way.
The data retrieved from the server is tiny and therefore that is not an issue. I can grab it all up front no problem with no appreciable wait time. The issue of course, comes in the form of waiting for component creation. The row components are relatively complex and the time to create / render them adds up fast.
Ideally I would like to handle all of this component creation in the background. It's pretty silly to wait for the user to click a button or even scroll down to do this work. The user is sitting there staring at the screen initially and we're doing nothing. I have implemented little messages that let the user know that additional rows are still loading if they do immediately scroll like mad. That works quite well.
Unfortunately everything I do still blocks the UI while the new components are being added to the facet.
I have tried creating them and adding them in stages as the user scrolls down. That works, but then the user must wait a little bit (with the UI thread blocked) each time I add additional components to the list.
I have tried creating the components dynamically in an async process. This allows me to create the components in the background. It works quite well. Unfortunately, as soon as I go to put those components into the body facet, we're right back to the blocked UI. I have put them into a non-displayed facet and everything is fine, but as soon as they get moved to the body they block the UI for rendering.