To display the spinner until all the data is rendered on the UI in LWC

Question

<lightning-button-icon icon-name="utility:chevrondown" variant="bare"
                                name="add-PickUpWindowSelect"
                                class="slds-m-left_xx-medium picklist-icon season-icon-edit"
                                onclick={toggleSelectDropInAddPickup}></lightning-button-icon>
                            <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}
                                            for:item="Product">
                                            <li role="presentation" key={Product.Id}>
                                                <div data-id={Product.Id} data-name={Product.Name}
                                                    onmouseover={subTypeHover} onclick={selectedProductFromPickList}
                                                    class="" role="option">
                                                    <span
                                                        style="padding-left: 0.5%; width: 55%">{Product.Name}</span>
                                                </div>
                                            </li>
                                        </template>
                                    </ul>
                                </div>
                            </template>

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?

Answer 1

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>

Answer 2

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>