Skip to main content
Topics#Lightning Experiencesajish vijayan latha の質問
sajish vijayan latha (Legalzoom) が「#Lightning Experience」で質問
2021年5月23日 23:26

Lightning-spinner LWC conditional rendering issue

Hello,

I am relatively new to LWC and was trying to conditionally render a Lightning-spinner on the click of a button based on the attribute 'showspinner' . Within the button click functon , first  I set the showspinner attribute to true  I am doing some client side logic (lets say i am just iterating from 1 to 40000) , then i set the showspinner to false. When I run this , i would expect the spinner to show and then disappear but I dont see the spinner at all. I was initially thinking it could be because the iteration happens very quickly and the spinner comes on and goes off quickly. So i introduced a timeout function but still dont see the spinner

Html Code

 

<template>
    <template if:true={showspinner}>
    <lightning-spinner size="small" title="spinner is here"></lightning-spinner>
</template>
    <lightning-button label="submit" onclick={handleclick}></lightning-button>
    {mynumber}
</template>

import { LightningElement } from 'lwc';
export default class Lwctest extends LightningElement {
    mynumber;           //primitive data type so @track not needed
showspinner = false;
    handleclick(){
       this.showspinner = true; 
        for (var i=0; i < 40000; i++){
            this.mynumber = i;
        }
      //  this.showspinner = false;       not working so moved inside timeout
      setTimeout(function(){ this.showspinner = false;
        alert("Hello");
    }, 3000);
    }
}

for the functinality I am trying to implement , I want to show the spinner on a client side function that takes a 2 to 3 seconds to render and thus I want to display a spinner but so far not able to do so. To make things easier to demonstrate I havent included all that Javascript functinality but instead just replaced that with an Iteration 

 
4 件の回答
  1. Charu Soni (ACS)
    2021年5月24日 13:26
    Hii Sajish

    Try Below Code

    delay = 5000;
    mynumber;
    showspinner = false;
        handleclick(){
           this.showspinner = true; 
            for (var i=0; i < 40000; i++){
                this.mynumber = i;
            }
          setInterval(() => {
            this.showspinner = false;
          }, this.delay);
          if(this.showspinner == false){
          this.delay = null;
          }
        }
    Please Mark It As Best Answer If It Helps

    Thank You!
回答を記入...
0/9000