[BUG] - Block not showing on subsequent calls in Angular component

[Denn Agustin]

Describe the bug

I am using notiflix-block-aio package in my Angular v14 application to display a loading spinner during an API request. I have imported the Block class from the package and created showLoading and hideLoading methods in my component, which use the Block.hourglass and Block.remove methods to display and hide the spinner, respectively.

The showLoading method works as expected when called in the ngOnInit lifecycle hook. However, when I try to call the showLoading method on a button click to display the spinner, it does not work anymore.

To Reproduce

import { Block } from 'notiflix/build/notiflix-block-aio';

...

ngOnInit(): void {
    this.showLoading('Loading data...');
    this.httpClient.get('https://example.com/data')
      .subscribe(response => {
        console.log(response);
        this.hideLoading();
      });
}

...

onButtonClick(): void {
    this.showLoading("Sample loading text");
    this.httpClient.get('https://example.com/data')
      .subscribe(response => {
        console.log(response);
        this.hideLoading();
      });
}

...

showLoading(loadingText?: string) {
    this.isLoading = true;
    this.loadingTxt = loadingText ?? 'Loading...';
    Block.hourglass('#myContainer', this.loadingTxt);
}

hideLoading() {
    this.isLoading = false;
    this.loadingTxt = '';
    Block.remove('#myContainer');
}

Expected behavior

The showLoading method should display the loading spinner when called on a button click by blocking a container, using Block from notiflix-block-aio package. The hideLoading method should hide the spinner.

Screenshots

First Load:

Button Click:
I added a text indicator to confirm that the method is being called, but as you can see, the Block.hourglass is not showing.

Desktop (please complete the following information):

• OS: Windows
• Browser : Chrome
• Version: 111.0.5563.64

Additional context

I tried using setTimeout but no luck.

[Furkan]

Hello @dennexequiel ,

Can you please provide a simple CodeSandbox(https://codesandbox.io/) implementation to reproduce this on live?

Thanks in advance,
Furkan

[Furkan]

Hello @dennexequiel ,
I am closing this ticket, you can please open it again when you are providing: #66 (comment)
Thanks,
Furkan