Lightning Spinner

Learn All About How to Use Lightning Spinner | Salesforce Lightning Component

Lightning spinner shows an animated spinner icon that specifies your request is loading or in simple words, we can say that it is a loading indicator. It is used like indicators that display when we are retrieving data or performing operations that take time. 

Let’s take a simple example, to understand the lightning spinner.

HTML: Create a Lightning web component and its named lightningSpinnerExample.html

<template>
    <lightning-button label = "Toggle" variant = "brand" onclick =  {handleClick}> </lightning-button>
    <div class = "slds-m-around_large">
        <template if:true = {isLoading}>
           Put loaded content here.
       </template>
       <template if:false = {isLoading}>
           <lightning-spinner alternative-text = "Loading...">  </lightning-spinner>
       </template>
    </div>
</template>

JS: Now, create a javaScript controller for the lightning component. Its named lightningSpinnerExample.js

import { LightningElement, api } from 'lwc';
export default class lightningSpinnerExample extends LightningElement {
    @api isLoading = false;
    handleClick(){
        this.isLoading  = !this.isLoading;
    }
}

dont miss out iconDon't forget to check out: How to Upload and Show Images in Lightning Aura Component | Salesforce Developer Guide

Meta.xml: You can see the meta.xml file & its named lightningSpinnerExample.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>

Output: 

In the lightning-spinner, alternative-text is used to give details about the reason for the requirement of the spinner. You can set the size of the spinner. By default the size of the spinner is medium. One more attribute of the spinner is variant & it changes the presence of the spinner. these are the accepted variant: base, brand, and inverse.

Let’s take a real example to understand the lightning spinner concept. In this example, we can load the contact information on button click.

HTML: Create a Lightning component and its named loadContactInfoUsingSpinner.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 = "Contact List" icon-name = "standard : contact">
       <div class = "slds-m-around_medium">
           <p class = "slds-m-bottom_small">
               <lightning-button label = "Load Contact" onclick = {handleLoadContact}> </lightning-button>
           </p>
           <template if:true = {contacts}>
               <template for:each = {contacts} for:item = "con" for:index = {index}>
                   <p key = {con.Id}> {con.Name} </p>
               </template>
           </template>
           <template if:true = {error}>
               {error}
           </template>
       </div>
   </lightning-card>
</template>

JS: Now, create a javaScript controller for the lightning component. Its named loadContactInfoUsingSpinner.js

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

dont miss out iconCheck out another amazing blog by Shweta here: An Introduction to Lightning Web Components | Salesforce Lightning

Apex class: Now, you have to create an apex class to get all the contact details. It's named contactClass.

public with sharing class contactClass{
    @AuraEnabled (cacheable=true)
    public static List <Contact> getContactList() {
        List <contact> conList = [ SELECT Id, Name, Phone, Email 
            FROM Contact ]
        return conList;
    }
}

When you will click on the Load Contact button. When loading will finish, you will see the contact list.

You can also add this Lightning web component to the home page. If you want to add it to the home page you have to follow below steps:

  • Go to the Home page → Click on Setup → select the Edit page from the dropdown → From the custom components find your lwc component & drag it on the right side or on your preferred side.
  • Click save & activate.

Responses

Popular Salesforce Blogs