Show Loader inside a Button using LWC

Introduction

Welcome to our Salesforce blog, your destination for Salesforce development insights. In this article, we’ll guide you on how to show a loader inside a button using Lightning Web Components (LWC).

Showing a Spinner in the UI or a Modal is easy, compared to adding it inside a button. This visual feedback of adding a loader inside a button using LWC is tricky but gives a very impressive visual effect.

Note: If you are new to using lightning-spinner and want to show a Spinner/ Loader while saving data in the UI, you can read this article first.

Implementing the Spinner Logic

Now, let’s explore how to implement the spinner inside a button using LWC. We’ll utilize the html button tag along with some JavaScript to achieve our goal. Here’s an example of the LWC component:

HTML Code

<template>
        <button type="button" onclick={save} class="slds-button slds-button_brand">
                    <div class="demo-only" style="position:static;display: flex;justify-content: end;">
                        <template if:true={showSpinner}>
                            <div>
                            <div role="status" 
                            style="position:relative;margin-right: 15px;" 
                            class="slds-spinner slds-spinner_x-small slds-spinner_inverse">
                                <span class="slds-assistive-text">Loading</span>
                                <div class="slds-spinner__dot-a"></div>
                                <div class="slds-spinner__dot-b"></div>
                            </div>
                            </div>
                        </template>

                        <div>Save</div>
                      </div>
        </button>
</template>

Explanation

In the above HTML code, we are using an HTML button tag as it gives us better control over the styling and control over the placement of the lightning-spinner component.

The idea is to have the spinner and text inside the button tag as a separate div, then apply a display:flex on the button with justify-content:end. This places the Spinner and Save text in a single line at each end of the display area.

Then when the button is clicked we control the visibility of the lightning-spinner tag, which is explained further in the JS code.

JS Code

import { LightningElement, track } from 'lwc';

export default class SpinnerInButtonLWC extends LightningElement {
    @track showSpinner = false;

    save(event){
        this.showSpinner = true;
        setTimeout(()=>{
            this.showSpinner = false;
        },3000)
    }
}

Explanation

In the JS code, we give a default value of false to showSpinner and when the Save button is clicked, the save function sets showSpinner to true, displaying the spinner. After simulating a time-consuming operation (which you can replace with your real use case), showSpinner is set back to false, hiding the spinner.

Demo

Deploy your LWC component in your Salesforce instance and test it. You’ll notice that the spinner appears inside the button when you click it, providing visual feedback during the data-saving process.

Conclusion

In this article, we’ve demonstrated how to add a spinner inside a button with Lightning Web Components, enhancing user experience and providing visual feedback during actions like saving data.

Feel free to use the provided code snippets in your own Salesforce projects and customize them to match your application’s design. We encourage you to share your feedback and suggestions in the comment section below and share this article with your friends if you find it helpful.

For more details about the lightning-spinner tag, you can check the Salesforce Documentation HERE.