If i do this:

 1 async connectedCallback() {
 2    this.showSpinner = true;
 3    await this.getTableInformation();
 4    this.showSpinner = false;
 5 }

Spinner starts but never ends. Still a breakpoint in line 4 will show this as the proper context and this.showSpinner as false.

However If I do this:

connectedCallback() {

async getTableInformation() {
    this.showSpinner = true;
    const [columns, rows] = await Promise.all([ this.getColumnsConfig(), this.getRowsData()]);
    this.tableInfo = Object.assign(this.tableInfo || {}, { columns }, { rows });
    this.showSpinner = false;

It does work properly and spinner is started and ended accordingly.


    <lightning-spinner if:true={showSpinner} variant="brand" alternative-text="Loading" size="large"> </lightning-spinner>
    <!--Something else here-->

Maybe is worth to mention that when saving inline edit changes, I also call this:

async handleInlineEditSave(event) {
    this.showSpinner = true;
    // logic here
    this.showSpinner = false;

Any idea why first version does not work?

  • seems fine to me, thought might be issue with using connectedCallback instead of renderedCallback but shouldn't matter. Can you also add how you use {showSpinner} in UI?
    – ytiq
    Mar 12 at 12:25
  • And another question is, do you set this.showSpinner = true; anywhere else in your code?
    – ytiq
    Mar 12 at 12:27
  • I added the details Mar 12 at 13:04
  • have you created a property for showSpinner on component?
    – ytiq
    Mar 12 at 13:17
  • WOW... just checked... I totally forgot to do it and that was the problem. Thank you so much. If you add that as a responde I will mark it as vest answer Mar 12 at 17:22

Make sure you have created a property for showSpinner otherwise, UI wouldn't update

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.