0

I would like my LWC component to hold off rendering until all the initial data is fetched. I am calling an Apex method to load the initial data imperatively in connectedCallback.

As the call to Apex is asynchronous, the fields are rendered with empty data for a bit which is not a good user experience.

I am using the spinner to be shown until all the data is fetched.

But just wondering whether we can hold off rendering until the initial data is loaded.

Improve this question

2 Answers 2

Reset to default
2

You can't delay rendering of a component. The usual way to take care of this is to show a spinner while loading:

<template>
  <lightning-spinner if:true={isLoading}></lightning-spinner>
  <div if:false={isLoading}>
    <!-- rest of your form/components here -->
  </div>
</template>
Improve this answer
3
  • What about when you're using <lightning-record-edit-form>, so you don't have control of retrieving the data and setting the spinner? I'm watching the component render field by field and it's ugly...
    – PatMcClellan__c
    Commented Feb 9 at 0:22
  • 1
    Ah... found the answer... use a onload={handleLoaded} param in the <lightning-record-edit-form>. I set showSpinner=true in the initial variables, then set it to false in the handleLoaded() handler.
    – PatMcClellan__c
    Commented Feb 9 at 0:39
  • @PatMcClellan__c We crossed comments. I forgot about the showSpinner thing.
    – sfdcfox ♦
    Commented Feb 9 at 0:40
1

Another way to do this would be to include your fields in a conditional template, and make this condition true only when all of your initial data is fetched.

you can make the isDataLoaded = true, when your fetch is completed.

Improve this answer
1
  • 1
    Yes, I generally use this approach, but was temporarily stumped on how to do it when using lightning-record-edit-form where the data loads automatically, rather than @wire or imperatively where I can turn the spinner off and make the data visible. The onload event in lightning-record-edit-form solved the problem.
    – PatMcClellan__c
    Commented Feb 28 at 16:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .