Show Spinner in LWC Modal/Popup Salesforce

cafeforce
cafeforce 10.9k Views 2 comments

Spinner in LWC or Aura component is necessary when you want to show the user that the system is processing data. One more advantage is that it blocks the UI so user won’t be able to click on buttons again. But sometimes you want to show spinner only on a particular section of a div or only inside the modal window.

To show spinner on a particular div only, check out the below link:

Show Spinner on a particular div or Section

To show Spinner in LWC Modal, heck out the below code:

Working Demo:

spinner-in-modal-popup-lwc-cafeforce-demo

 

We will use a single component to show modal markup. A boolean variable will control the visibility of the Spinner. Modals/pop-ups can be created easily with few lines of code. There are various ways to create it.

To create a modal in LWC, Click Here.

We will discuss one of the methods here. To start, you first need to create a component in LWC. Here I’m creating customModal component.

Now, open your component’s HTML file and paste the below code:

 

Now open the JS file and paste the below code:

 

Now open the CSS file and paste the below code. If you can’t see a CSS file in your package, right-click and create a new file and name it as YOU_COMPONENT_NAME.css:

 

That’s it. Your component is now ready to use. You can call this component on a VF page or put this in a lightning App and preview this.

spinner-in-modal-lwc-salesforce

Also Check:

To create a Mass Approval component to Bulk Approve/Reject Approvals, check out: Mass Approval component

To create a Related list with Inline Edit Support, check out: Inline Editable Related List

For any queries or suggestions regarding this post, comment below:
Cheers … 🙂

Share This Article
2 Comments
Subscribe
Notify of
guest

2 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Bhaskar

One suggestion for above solution instead of using internal css

<div class=“slds-modal__content modalBody”>
</div>

Can be replaced with :
<div class=“slds-modal__content slds-is-relative”>
</div>