Two Time-Saving Tips When Using Loading Spinners In Lightning Web Components (LWC)
Quickest Way To Show/Hide It & Bind It Inside An Element
I love to learn, build things & solve problems. Developer with a love for design. DIY Electronics junkie. Certified Trailblazer Guide with a passion for assisting anyone navigate their Salesforce journey. Oh, and did I mention I have a black belt in eating? Foodie at heart! Also, a 12x Certified Developer, Salesforce Trailhead Triple Ranger (I’ve conquered more trails than an avid hiker) with 9 Years of professional experience building unique innovative solutions for customers using Salesforce, IoT, AI & Design on the web and mobile. Random Facts: I can debug code and eat a gourmet meal simultaneously. My love for solving problems is only rivaled by my love for solving the mystery of what’s for dinner.
The Quickest Way To Show/Hide Loading Spinner
cmp.html
<lightning-spinner
lwc:if={isLoading}
alternative-text="Loading..."
variant="brand"
>
</lightning-spinner>
cmp.js
isLoading = false; //true - shows spinner, false - hides spinner
//can we toggeled like this.isLoading = true; OR this.isLoading = false;
Example Usage
loadData(){
this.isLoading = true;
//do something
this.isLoading = false;
}
Example Usage With Promises or Imperative Apex Calls
handleLoad() {
this.isLoading = true;
getContactList()
.then((result) => {
this.contacts = result;
})
.catch((error) => {
this.error = error;
}).finally(() => {
this.isLoading = false;
});
}
Limiting The Spinner To Be Bound Inside An Element
Did you ever add a spinner to your component but it ended up covering the whole page / going out of where it's supposed to be?
<div class="slds-is-relative">
<lightning-spinner
lwc:if={isLoading}
alternative-text="Loading..."
variant="brand"
>
</lightning-spinner>
</div>
