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.

So, is there any way to not block the UI for rendering in this way? I know Javascript should be able to do this, but I'm not sure about the Lightning framework.

  • lightning framework is javascript, maybe if you updated your post with some sample snippets alongside a specific issue, others can point you into the right direction ? – glls Dec 5 at 1:38
  • glls, The Lightning framework is written and used in javascript. It is not javascript. My point was that I know I can add to the dom in Javascript as implemented by the various browsers without unduly blocking the UI, but that doesn't mean it's well supported by Aura. I do not have a specific code issue. It's a conceptual issue. sfdcfox is tracking with me. I'm just wondering if there is a better way to render Lightning components without blocking the UI thread. Probably it's a matter of doing it in smaller chunks so the user doesn't notice, but it's worth asking if anyone has a better idea. – Tory Netherton Dec 5 at 17:13
  • Your'e telling me that a question about Salesforce programming which very much has specific answers and is not simply a discussion of merits, is off topic because it does not include specific code? Asking "if there is a way to render components without blocking the UI thread" should very much be on topic for this site and if it isn't then you have poor criteria. – Tory Netherton Dec 7 at 19:34
  • No - as mentioend in my preious comment, i had missunderstood the question and then may have been then flagged for reopening. (which i believe it did) – glls Dec 8 at 21:04
  • @glls I see. Thanks for reopening. Unfortunately, I suspect the answer is "no, if you're going to render components you should probably do it in small batches and with indicators to the user, so they can understand what is happening while the thread is blocked, because there is no way to not block UI during actual rendering". – Tory Netherton yesterday

aura:iteration and Aura.Component[] impose a pretty significant penalty when there's too many items in the lists. This number is just a few hundred items. What you need is faux scrolling. In this method, we only have a few real rows, and the items we show are just the ones that are nearby, while the rest are removed. I don't have a Lightning-specific example right now, but just know that you should keep the number of real, initialized components to a minimum.

  • Ya, that's exactly what I've set up. I have it only showing a section of rows and then as the user scrolls it adds more to one end and removes them from the other end. I'm doing it a chunk at a time currently. The issue is that when it does so, it blocks the UI for an unacceptable period of time. Maybe I just need to do it in smaller chunks or even one by one. I'll try that and see how it goes. Thanks. – Tory Netherton Dec 5 at 17:14
  • @ToryNetherton no, faux scrolling is where there's only 10-20 whatever items actually being rendered. As the user scrolls down, items at the top are removed from rendering, so only the records on screen are really rendered. It uses an outside fake scroll bar to simulate being real. – sfdcfox Dec 5 at 17:16
  • ok, so I guess I should say that's close to what I'm doing. Not actually what I'm doing though. I'm essentially creating 3 pages worth and then adding and removing pages as the user scrolls up and down. You're essentially saying do the same thing row by row. with a fake scroll bar. That is an interesting concept. I'll think about that. Thank you. – Tory Netherton Dec 5 at 17:22

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.