Show a Spinner When Saving Data in LWC – Example

Introduction

Providing a seamless and user-friendly experience is curtail to developing solutions in any technology. One effective way to enhance the user experience is to show a spinner while saving data in LWC. In this beginner-friendly guide, we will explore how to implement a Spinner/ Loader using Lightning Web Components (LWC) in Salesforce.

In today’s example will be using lightning-record-edit-form base component to create an Account record. When you click the “Save” button, a spinner will appear during the record-saving process and automatically disappear when the operation is successful.

Implementing a Spinner When Saving Data in LWC

We will break down the process into simple steps:

Step 1: Create a New Lightning Web Component

Start by creating a new Lightning Web Component in your Salesforce org. You can do this using the VSCode.

Note: If you have not yet installed Salesforce CLI and set up VSCode do read this article and come back again.

Step 2: Add HTML Markup and JavaScript

In your Lightning Web Component’s HTML file, use the lightning-record-edit-form base component to create an editable form for creating an Account record. Here’s a simplified example:

HTML Code

<template>
     <!-- Lightning Spinner Placeholder -->
     <template if:true={showSpinner}>
        <div class="slds-is-relative">
            <lightning-spinner
                alternative-text="Loading"
                size="medium"
            ></lightning-spinner>
        </div>
    </template>
    
    <lightning-record-edit-form
    onsubmit={handleSave}
    onsuccess={handleSuccess}
    record-id={recordId}
    object-api-name={objectApiName}
    >
        <lightning-input-field field-name={accountPhone}> </lightning-input-field>
        <lightning-input-field field-name={accountWebsite}> </lightning-input-field>
        <lightning-input-field field-name={accountShippingAddress}> </lightning-input-field>
        <lightning-input-field field-name={accountType}> </lightning-input-field>

        <lightning-button variant="brand" type="submit" label="Save">

        </lightning-button>

    </lightning-record-edit-form>
</template>

Explanation

In this code, we are using lightning-record-edit-form component to create an editable form for the Account object. We are using the template tag to control the visibility of our lightning-spinner by using a track variable showSpinner.

When the showSpinner is set to true the spinner is visible in the UI, when its turned false it disappears.

<lightning-spinner> is a lightning component provided by Salesforce and comes in different variants and sizes.

Read more about <lightning-spinner> component in Salesforce Documentation HERE

Note: If you are unfamiliar with lightning-record-edit-form, you go through this article to learn more about it.

Step 3: Define JavaScript Logic

In your Lightning Web Component’s JavaScript file, define the showSpinner variable and the event handlers for onsubmit and onsuccess:

JS Code

import { LightningElement,api,track } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

import Acccount_Phone from '@salesforce/schema/Account.Phone';
import Acccount_Website from '@salesforce/schema/Account.Website';
import Acccount_Shipping_Address from '@salesforce/schema/Account.ShippingAddress';
import Acccount_Type from '@salesforce/schema/Account.Type';

export default class LightningRecordEditFormDemo extends LightningElement {
    accountPhone            = Acccount_Phone
    accountWebsite          = Acccount_Website
    accountShippingAddress  = Acccount_Shipping_Address
    accountType             = Acccount_Type

    @api recordId;
    @api objectApiName;
    @track showSpinner = false;

    handleSuccess(event){
        // Hide the spinner when the form submission is successful
        this.showSpinner = false;
        this.dispatchEvent(
                new ShowToastEvent({
                    title:'Success',
                    message:'Record updated successfully',
                    variant:'success'
                })
        )
    }

    handleSave(event){
        event.preventDefault();
        // Show the spinner when the form is submitted
        this.showSpinner = true;
        const fields = event.detail.fields;
        this.template.querySelector('lightning-record-edit-form').submit(fields);
    }
}

Explanation

The above Javascript code includes the complete logic to create Account record with the help of handleSave handler.

As you can see we are setting this.showSpinner = true to show the Spinner/ Loader in the UI, while the data is getting saved in the Salesforce database.

The handleSuccess handler is called when Account data is successfully saved in the Salesforce database.

Note: Both handleSave and handleSuccess handlers are mentioned in the lightning-record-edit-form tag of the html code..

Step 4: Testing and Visualization

After creating the Lightning Web Component, edit the Lightning Page of any Account record in Salesforce and drag your component from the left hand. Save and activate the page.

Demo

As you can see in the demo above, when the user clicks on the Save button a Spinner or Loader is visible in the screen and once the data is successfully saved it disappears.

Conclusion

In this article, we’ve shown you how to create a Lightning Web Component that shows a spinner when saving data in LWC. In this example we used lightning-record-edit-form base component, but you can use the loader when there is a transaction pending in the background.

You are free to use the provided code snippets and adapt them for your personal org or specific use cases. If you encounter any issues or have suggestions for improvement, we encourage you to share your feedback in the comments section below. If you found this article useful, subscribe to our mailing list, and don’t hesitate to share it with your friends and colleagues!

For further details and advanced topics, you can refer to the Salesforce LWC Documentation.