<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>
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 Iterationimport { 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);
}
}
Hii Sajish Try Below Code
Please Mark It As Best Answer If It Helpsdelay = 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;
}
}
Thank You!
