Add Spinner in Modal/Popup in LWC Salesforce

by Rijwan Mohmmed
4 comments
How-to-add-Spinner-in-Modal/Popup-in-Lightning-Web-Component-(LWC)-Salesforce

Hello, friends today we will learn about add Spinner in Modal/Popup in Lightning Web Component (LWC) Salesforce. We will show a spinner whenever load the data from the server or load the logic. In this way, we can give a better user experience to any user that something is in process. Spinner Modal/Popup LWC Salesforce.

There is a problem when we show the spinner in the modal/popup. It shows on the whole screen instead show only in modal body. For this, we just need a custom CSS position: relative in spinner parent div. Let’s understand with a simple example.

Checkout : Spinner in LWC

LWCModalSpinner.Html :

<template>
    <div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
                            </span>
						</div>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
									<h1>
										<span>Show Spinner in Modal Body LWC</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
                <div class="slds-page-header__col-actions">
                    <div class="slds-page-header__controls">
                    <div class="slds-page-header__control">
                        <ul class="slds-button-group-list">
                        <li>
                             <lightning-button name="openModal" label="Open Modal" onclick={openCloseModal} variant="brand" class="slds-m-around_small"></lightning-button>
                        </li>
                        </ul>
                    </div>
                    </div>
                </div>
			</div>
		</div>
	</div> <br/>
   
 
    <!-- This Modal will only be visible if showModal is set to true -->
    <template if:true={showModal}>
        <section aria-modal="true" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container ">
                <header class="slds-modal__header">
                    <h2 class="slds-text-heading_small">Modal Header</h2>
                    <lightning-icon class="slds-modal__close" icon-name="utility:close" size="small" onclick={openCloseModal}></lightning-icon>
                </header>
                <div class="slds-modal__content modalBodySpinner">
                    <template if:true={showLoading}>
                        <lightning-spinner alternative-text="Loading" size="medium" class="spinnerClass"></lightning-spinner>
                    </template>
                    <div class="slds-p-around_small">
                        <p>
                            We will show spinner when ever load the data from server or load the logics. By this way we can give a better user experience to any user that something is in process.  There is a problem when we show the spinner in modal/popup. It show in whole screen instead show only in modal body. For this we just need a custom css position:relative in spinner parent div. Lets understand with a simple example.
                        </p>
                    </div>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button variant="brand" label="Show/Hide Spinner" onclick={showHideSpinner} class="slds-p-around_x-small"></lightning-button>
                    <lightning-button variant="brand" label="Cancel" onclick={openCloseModal} class="slds-p-around_x-small"></lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

LWCModalSpinner.Js :

import { LightningElement, track } from 'lwc';
export default class LWCModalSpinner extends LightningElement {

    @track showModal = false;
    @track showLoading = false;
 
    openCloseModal() {
        // Setting boolean variable show/hide modal
        this.showModal = !this.showModal;
    }
 
    showHideSpinner() {
        // Setting boolean variable show/hide spinner
        this.showLoading = !this.showLoading;
    }
}

LWCModalSpinner.css :

.modalBodySpinner{
	position: relative;;
}
What’s your Reaction?
+1
1
+1
0
+1
0
+1
0
+1
1
+1
0

You may also like

4 comments

Trey November 10, 2021 - 10:28 pm

you are truly a excellent webmaster. The web site loading velocity is amazing.
It seems that you are doing any unique trick. In addition,
The contents are masterwork. you have done a wonderful
job in this matter!

Reply
Rijwan Mohmmed January 30, 2022 - 3:45 pm

Thank you

Reply
Ashli November 13, 2021 - 2:01 am

My brother recommended I might like this blog. He was entirely right.
This post truly made my day. You cann’t imagine just how much time
I had spent for this info! Thanks!

Reply
Bhaskar November 25, 2022 - 6:44 am

One suggestion for above solution instead of using internal css

Can be replaced with :

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.