Since 13.x release, the spinner will randomly not hide

[raydawg2000]

Small history: I have used this project for years in about 10+ projects and never had this issue. This is my first project using Angular 13.x and Ngx-Spinner 13.x and this problem has appeared.

So essentially the call for the spinner to hide will randomly not trigger and the spinner will remain on screen. I use FullScreen mode which means I have to do a browser refresh since my screen becomes locked from the spinner overlay. I have had this happen within the first 10 minutes or sometimes it takes an hour or so.

I have used both the Spinner service and the showSpinner attribute and this issue happens with both methods.

It also happens using the bare bones code direct from the instructions
<ngx-spinner type="ball-scale-multiple"></ngx-spinner>

I have tried catching an error from the hide service but it always returns SUCCESS even if the hide fails

this.spinnerService.hide().then(response => { console.log("SUCCESS: " + response); }).catch(response => { console.log("FAIL: " + response); });

All of the applicable items in the "Useful Tips" section of the instructions were followed.

This problem was with both Ngx-Spinner 13.0 as well as the latest 13.1.1
I have downgraded down to Ngx-Spinner 12.x and so far after 2 days I haven't had the issue (still using Angular 13). So i'm assuming there is something with the 13.x release.

I don't have a test project or anything to share, but if you need me to test some things or debug somehow please let me know and I can try and help out.

[Napster2210]

@raydawg2000 I'll look into this issue.

[Napster2210]

@raydawg2000 With the latest version have you add the css file in angular.json file?

[raydawg2000]

@Napster2210 If you mean the CSS file for the individual spinner animations then yes. Without that file the spinner did not show up at all, just the dark background overlay.

[Napster2210]

@raydawg2000 Strange one! Can you re-create the scenario in Stackblitz and let me know the exact steps to reproduce this issue? So I can also debug the same one on my end.

[raydawg2000]

@Napster2210 honestly I am not even sure how I would do that. There are so many back and forth API transactions that cause Spinners to show/hide, trying to replicate that outside my project seems quite the task.

I believe it would easier for me to grab the code and try and debug it running on my current project. I have never done any plugin development so if you have any instructions on how I can compile and run the code that would help.

[raydawg2000]

Ok so after some digging with ngx-spinner 13.1.1 on my local app I may have found something. So i put a bunch of debug statements in my code that calls the spinner service as well as the ngx-spinner source code to try and track anything down. I was finally able to replicate it....which as I mentioned is pretty random.

I have attached the JS console output which gives the line numbers in the source code so you can reference where it's coming from. Anyways, i have found an instance where the spinner is getting set to SHOW but my code never calls the show method. As you can see in the logs, there are defined output statements every time time I call hide and show. When the bug happens, the spinner is being set to show but it's not through my code. Below is my service class that wraps up the hide/show calls

export class SpinnerService {
  pendingLoads: number = 0;

  constructor(private spinnerService: NgxSpinnerService) {}

  addPendingLoad() {
    if(this.pendingLoads == 0) {
      console.log("show spinner");
      this.spinnerService.show();
    }

    this.pendingLoads++;
  }

  removePendingLoad() {
    this.pendingLoads--;

    console.log("Pending pre-hide: "+this.pendingLoads);
    if(this.pendingLoads <= 0) {
      setTimeout(() => {
        console.log("hide spinner");
        this.spinnerService.hide().then(response => {
          console.log("SUCCESS HIDE: " + response);
          console.log("Pending post-hide: "+this.pendingLoads);
        }).catch(response => {
          console.log("FAIL HIDE: " + response);
        });
      });
    }
  }
}

The end of the logs shows an instance where the spinner is being shown but my console.log("show spinner"); is not being called. So that means it's being triggered by some other means outside of my code. Not sure if an instance of the spinner is not being removed from your internal Observable and is getting output again?

This is being tested with a bare-bones spinner call so no external variables should be influencing it

<ngx-spinner type="ball-scale-multiple"></ngx-spinner>

If there are some other areas where you think having some debug statements would be helpful please let me know and I can try it out.

chrome console2.log

[oifrah]

Hi,

@raydawg2000 We encounter this issue too - any chance you figured it out?