NgxSpinner does not show on time

Question

On my application, there are Angular-intensive actions that happen after showing the loading indicator but for some reason NgxSpinner does not act properly for Angular-intensive work to be done after triggering it or I'm doing something wrong.

Prepared a small example (see on Stackblitz) check the console messages, shown message appears after eventEmitter is done incrementing.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxSpinnerModule, CommonModule],
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
    <button (click)="show()">ClickMe</button>
    <span>{{counter}}</span>
    <ngx-spinner type="ball-spin-clockwise"
      ><p
        style="
          color: white;
          font-size: 14px;
          font-weight: 500;
          font-family: Montserrat;
          text-align: center;
        "
      >
        Loading... <br />Please wait
      </p></ngx-spinner
    >
  `,
})
export class App {
  name = 'Angular';
  counter = 0;
  eventEmitter: EventEmitter<void> = new EventEmitter();

  constructor(private spinnerService: NgxSpinnerService) {
    this.eventEmitter.subscribe(() => {
      this.counter++;
      console.log('counter', this.counter);
      if (this.counter === 500) {
        this.spinnerService.hide();
      } else {
        this.eventEmitter.emit();
      }
    });
  }

  show() {
    this.spinnerService
      .show(undefined, {
        type: 'ball-spin-clockwise',
        bdColor: 'rgba(35,35,35,0.8)',
        color: '#2ac6a2',
        size: 'large',
        fullScreen: true,
      })
      .then(() => console.log('shown'));
    this.eventEmitter.emit();
  }

  hide() {
    this.spinnerService.hide().then(() => console.log('hidden'));
  }
}

bootstrapApplication(App);

If I add a setTimeout on the this.eventEmitter.emit() inside the event emitter subscription after incrementing the counter, it works. But of course this is just a demo app, and I can't use setTimeout for everything that should happen right after indicator is triggered.

What am I doing wrong, or what can I do to make this work?