Lightning Spinner in LWC (Lightning Web Component)

Lightning Spinner in LWC (Lightning Web Component)

What is Lightning Spinner in LWC?

Lightning Spinners are CSS loading indicators that should be shown when retrieving data or performing slow computations. lightning-spinner displays an animated spinner image to indicate that a request is loading. This component can be used when retrieving data or performing an operation that takes time to complete. In some cases, the first time a parent component loads, a stencil is preferred to indicate network activity.

lightning-spinner LWC example

Let’s first see a very simple example to show or hide lightning spinner using a toggle button

lightningSpinnerLWCSimpleExample.html

<template>
    <lightning-button label="Toggle" variant="brand" onclick={handleClick}>
    </lightning-button>
    <div class="slds-m-around_large">
        <p if:true={isLoaded}>Content has been loaded.</p>
         <div if:false={isLoaded} class="slds-is-relative">
            <lightning-spinner
                alternative-text="Loading..." variant="brand">
            </lightning-spinner>
        </div>
    </div>
</template>

lightningSpinnerLWCSimpleExample.js

import { LightningElement, api } from 'lwc';
export default class LightningSpinnerLWCSimpleExample extends LightningElement {
    @api isLoaded = false;
    // change isLoaded to the opposite of its current value
    handleClick() {
        this.isLoaded = !this.isLoaded;
    }
}

lightningSpinnerLWCSimpleExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this LWC component on the home page.

• Go to Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your lightningSpinnerLWCSimpleExample component and drag it on right-hand side top.
• Click Save and activate.

We will see the following output.  If the user will click on the toggle button then the spinner will toggle on or off.

lightning-spinner example with Apex

Let’s see one more  real-life example where the user will click on the button to load account and during apex request lightning spinner loading image

AccountHelper class

public with sharing class AccountHelper {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList() {
        return [SELECT Id, Name, Type, Rating,
                Phone, Website, AnnualRevenue
            FROM Account];
    }
}

lightningSpinnerLWCExample.html

<template>
    <div class="spinner">
        <template if:true={isLoading}>
             <lightning-spinner alternative-text="Loading" variant="brand" size="large">
             </lightning-spinner>
        </template>
    </div>
    <lightning-card title="Account List lightning-spinner LWC" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <p class="slds-m-bottom_small">
                <lightning-button label="Load Accounts" onclick={handleLoad}></lightning-button>
            </p>
            <template if:true={accounts}>
                <template for:each={accounts} for:item="acc">
                    <p key={acc.Id}>{acc.Name}</p>
                </template>
            </template>
            <template if:true={error}>
                {error}
            </template>
        </div>
    </lightning-card>
</template>

lightningSpinnerLWCExample.js

import { LightningElement, track } from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';
export default class LightningSpinnerLWCExample extends LightningElement {
    @track accounts;
    @track error;
    @track isLoading = false;
    handleLoad() {
        this.isLoading = true;
        getAccountList()
            .then(result => {
                this.accounts = result;
                this.isLoading = false;
            })
            .catch(error => {
                this.error = error;
                this.isLoading = false;
            });
    }
}

lightningSpinnerLWCExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this LWC component on the home page.

• Go to Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your lightningSpinnerLWCExample component and drag it on right-hand side top.
• Click Save and activate.

We will see the following output when the user will click on the Load Accounts button. When loading will finish, the user will see the account list.

Users will see the following account list when loading completes.

For more details please refer to official link