<lightning-button-icon icon-name="utility:chevrondown" variant="bare"
                                class="slds-m-left_xx-medium picklist-icon season-icon-edit"
                            <template if:true={showProductPicklistInEdit}>
                                <div style="width:100%;max-width:100%;" class="sids-list-view" role="listbox">
                                    <ul role="presentation" style="max-height:260px;overflow-y:auto;">
                                        <template if:true={showProductPicklistInEdit} for:each={productList}
                                            <li role="presentation" key={Product.Id}>
                                                <div data-id={Product.Id} data-name={Product.Name}
                                                    onmouseover={subTypeHover} onclick={selectedProductFromPickList}
                                                    class="" role="option">
                                                        style="padding-left: 0.5%; width: 55%">{Product.Name}</span>

When i click on the lightning button, the onclick function - toggleSelectDropInAddPickup sets the toggleSelectDropInAddPickup to true and each element in productList is rendered as the picklist values in the UI. productList is available in JS on load as a Wire function. But rendering he picklist values are taking a lot of time as there is a lot of data in productList. How do I add the spinner till all of the data in the productList is loaded?

2 Answers 2


You can show the spinner with a promise.

async toggleSelectDropInAddPickup(event) {
  this.isLoading = true;
  this.showProductPicklistInEdit = !this.showProductPicklistInEdit;
  await Promise.resolve(); // Waits one render cycle
  this.isLoading = false;

You then just need to show the spinner as appropriate:

<lightning-spinner if:true={isLoading}></lightning-spinner>

Create a private property isLoading = true so that when the LWC loads its default value is true

Set the value to false after all the productList data is loaded and processed by the wire function

Use lightning-spinner on the HTML to show the spinner while isLoading is true.

<lightning-spinner variant="brand" size="large" if:true={isLoading}> </lightning-spinner>
  • They did say the data is already loaded. They're trying to do rendering.
    – sfdcfox
    Apr 25, 2022 at 14:58

You must log in to answer this question.

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