1

I have a conditional lightning spinner, that I am showing when the SAVE Button is clicked. In the end I am setting the spinner variable to false, but the spinner is still loading infinitely. In the javascript file, it is setting to false in the end of the SAVE Method. Below is my code :

LWC :

    <template>
     <template  if:true={showSpinner}>
          <div class="loadingSpinner">
               <lightning-spinner alternative-text="Loading" size="medium" class="slds-is-fixed"></lightning-spinner>
          </div>
          </lightning-button>
          </template>
          <lightning-button  variant="brand" label="Save" title="Save" class="slds-m-left_x-small" onclick={submitDetails}>
    </template>

Javascript :

showSpinner=false;
submitDetails(event) {
    this.showSpinner = true;
    console.log('Spinner 1 ::' + this.showSpinner) //set to true
    //Operation for SAVE method called
    this.showSpinner = false;
    console.log('Spinner 2 ::' + this.showSpinner); //set to false
}

1 Answer 1

1

I'am not able to reproduce your issue with the shared code. But I would recommend below modifications for your requirement :

Move Save button outside of the showSpinner template.(Currently , nothing is visible on the UI) Below is the corrected markup:

<template>
           <template  if:true={showSpinner}>
              <div class="loadingSpinner">
                 <lightning-spinner alternative-text="Loading" size="medium" class="slds-is-fixed"></lightning-spinner>
              </div>
           </template>
           <lightning-button  variant="brand" label="Save" title="Save" class="slds-m-left_x-small" onclick={submitDetails}></lightning-button>
        </template>

Reset showSpinner in callback of your save operation :

import apexMethod from '@salesforce/apex/MyApexClass.apexMethod';

...

showSpinner=false;
  submitDetails(event) {
    this.showSpinner = true;
    console.log('Spinner 1 ::' + this.showSpinner) //set to true
    //Operation for SAVE method called
    apexMethod()
    .then(result => {
      // do something with results
    })
    .catch(error => {
      // do something with error
    })
    .finally(()=> {
      this.showSpinner = false;
    })

    console.log('Spinner 2 ::' + this.showSpinner); //set to false
  }
1
  • 1
    The above solution worked. I was having a loop that was creating a map and at the same place I was setting the showSpinner. I removed the showSpinner declaration from there and then set the spinner to false in the finally block. Commented May 20, 2023 at 15:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .