Distincts loaders should be both switch on at the same time

[Albejr]

Steps:

1. Show loaders '1' and '2'
2. Get peoples data and hide loader '1'
3. Get pets data and hide loader '2'

this.loadingMaskService.showGroup('loaderGroup1');
this.loadingMaskService.showGroup('loaderGroup2');

this.http.get('/api/people').subscribe(p => {
	this.loadingMaskService.hideGroup('loaderGroup1');
	
	this.http.get('/api/pet').subscribe(a => {
		this.loadingMaskService.hideGroup('loaderGroup2');
	});
});

<div class="card" [ngxLoadingMask]="'loaderGroup1'">
	PEOPLE CONTENT
</div>
<div class="card" [ngxLoadingMask]="'loaderGroup2'">
	ANIMAL CONTENT
</div>

Only the first loader '1' works, the second '2' is not displayed.

[haoliangwu]

hi @Albejr ,

I try to reproduce issue with the following code:

    this.service.showGroup('zone1')
    this.service.showGroup('zone2')

    setTimeout(() => {
      this.service.hideGroup('zone1')
    }, 1000)

    setTimeout(() => {
      this.service.hideGroup('zone2')
    }, 3000)

but everything works fine.

what do you mean about "the second '2' is not displayed" ? There are maybe two scenarios about it:

• first one is the the response of the api '/api/pet' return particularly fast, so the spinner comp was detached immediately when it was attached to mask container dom element. so it seems "not displayed".
• second one is when you invoke showGroup(), the second 2 group got the attach event from the service instance and try to attached spinner comp to the mask container dom element, but currently the container dom element maybe still not loaded(mounted into the document). in this case, the attach process will fail silently.

resolution

• about the case 1, I think the case is expected result.
• about the case 2, try to invoke showGroup() after the container dom element has loaded, for example, use ngAfterViewInit or other technology.

if you have any questions, fell free to let me know, thx.

[haoliangwu]

FYI, the library use observer pattern to process the multiples directive communication. The loadingMaskService act as Observable(multi cast) and the multiple directives act as Observer, so I guess the issue occurred in spinner attaching process.

[Albejr]

It really worked in the ngAfterViewInit event.
But, the GET services are in the ngOnInit event.

https://stackblitz.com/edit/haoliangwu-ngxloadingmask

[haoliangwu]

hi @Albejr ,

if you have to put the business code into ngOnInit lifecycle, to wait the container element loaded, you have two options:

• put the code into setTimeout

something like:

  // invoke the code into next event tick
  setTimeout(() => {
      this.loadingMaskService.showGroup('zone1');
      this.loadingMaskService.showGroup('zone2');

      setTimeout(() => {
        this.loadingMaskService.hideGroup('zone1');
      }, 5000);

      setTimeout(() => {
        this.loadingMaskService.hideGroup('zone2');
      }, 3000);
  })

• inject ChangeDetectorRef and trigger change detection manually

the code is:

constructor(
    private loadingMaskService: LoadingMaskService,
    private cdr: ChangeDetectorRef
  ) { }

  ngOnInit(): void {
      // trigger change detection manually
      this.cdr.detectChanges()

      this.loadingMaskService.showGroup('zone1');
      this.loadingMaskService.showGroup('zone2');

      setTimeout(() => {
        this.loadingMaskService.hideGroup('zone1');
      }, 5000);

      setTimeout(() => {
        this.loadingMaskService.hideGroup('zone2');
      }, 3000);
  }