I have a checkbox in a custom datatable in a lightning-card. When the checkbox is checked or unchecked, I want a lightning spinner to cover the entire component to stop the user from doing anything until that check is process (I do back end stuff on check/uncheck).

Right now I am dispatching an event from the child checkbox to the top level parent.

const spinnerEvent = new CustomEvent('showspinner'); this.dispatchEvent(spinnerEvent);

The parent picks this up, does its stuff, then kills the spinner. This 'works' but there is a lag for when the spinner first shows up. The very first click, the lag is significant and allows the user to do stuff on the component when they should be locked by the spinner. Every other click after the first the lag is much less but still there.

Is it possible to more instantaneously kick off a spinner from the child component to cover the entire parent component?

1 Answer 1


Without seeing your code, it'd be hard to tell why this is happening. The most important thing to remember is that events cannot be processed until your code stops executing, so you should do something like this:

handleClick() {
    this.dispatchEvent(new CustomEvent('showspinner'));
    setTimeout(this.continueProcessing.bind(this), 0);
continueProcessing() {
    // do more stuff here
  • 1
    That little trick helped a lot. There is still the tiniest bit of lag, just due to status propagation time I can only assume. But it is much faster, and probably the best I'll get. I was calling an apex method after dispatching the event. That probably caused the lag to be so bad, but the set timeout makes it very quick and consistent. Jan 13, 2020 at 22:01
  • 1
    @TylerDahle You can avoid double-clicks by setting a flag in your class and reset it when the call finishes, but yes, this trick will reduce the visual lag.
    – sfdcfox
    Jan 13, 2020 at 23:12

You must log in to answer this question.

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