Trigger a spinner from child component up to parent component (LWC)

Question

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?

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
}