如何在所有挂起操作完成之前阻止 UI？

Question

I have an Angular 8 web app with NgxSpinner . I'm using it to block UI when some lengthy process is in progress to prevent users from interacting with complex forms while some parts haven't yet fully loaded.

The problem is that NgxSpinner hides itself immediately if some process calls hide , no matter if there is still another process with its own show/hide call pair running. So, the web page is unblocked too early when any shorter process has been completed and has called spinner.hide() .

Here's Stackblitz example.

How do I make the NgxSpinner to wait for the last hide to match all show calls?

PS It seems an issue with many UI block libraries I've tried - they just don't account for parallel processes calling show/hide multiple times.

Answer 1

Create one service for spinner and keep show/hide count there.

export class MySpinnerService {
  showIndex = 0;
  hideIndex = 0;

  constructor(private spinner: NgxSpinnerService) {}

  show() {
    this.showIndex++;
    this.spinner.show();
    console.log('show spinner', this.showIndex);
  }

  hide() {
    this.hideIndex++;
    if (this.showIndex === this.hideIndex) {
      this.spinner.hide();
      console.log('hide spinner', this.hideIndex);      
    }
  }

So when showIndex and hideIndex equals you need to hide spinner.

Call in your component

this.mySpinner.show(); // show spinner
this.mySpinner.hide(); // hide spinner

Here is example in Stackblitz .

Answer 2

you can make a use of Promise. Each Process function will return a promise and then you can make a use of Promise.all function which will be called once all the promise is resolved. you can hide the spinner in promise.all method. Please find below the sample code.

this.spinner.show();
let p1 = new Promise((resolve, reject) => {

  setTimeout(() => {
    resolve();
  }, 3000);

});

let p2 = new Promise((resolve, reject) => {

  setTimeout(() => {
    resolve();
  }, 3000);

});

Promise.all([p1,p2]).then( ()=> {
  this.spinner.hide();
})

Answer 3

您可能想要使用 forkJoin 运算符，在这种情况下，您将在所有请求完成后进入此状态，然后您将隐藏加载微调器