Angular "wait" dialog is not displaying

Question

I'm implementing a dialog with a mat-spinner while page data is loading. I'm working with Angular v14. I'm using a dialog, instead of a plain spinner, because I'll need to pass some information in it. The problem I'm having is, the dialog doesn't display unless I put a break point immediately after it. My understanding of Angular is its synchronous so the code to show the dialog should complete before loading the data, yes? However, I also tried adding a setTimeout to my LoadData method to give it extra time. But the dialog never appears.

The dialog is its own component

<h3 mat-dialog-title>Please Wait</h3>

<mat-dialog-content>
  <div style="display:flex; flex-direction:row; justify-content:space-around ">
      We're getting your data...
    <mat-spinner [diameter]="20"></mat-spinner>
  </div>
</mat-dialog-content>

<mat-dialog-actions></mat-dialog-actions>

The typescript file is empty

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit {

  constructor(
    public spinnerRef: MatDialogRef<SpinnerComponent>
  ) { }
 
  ngOnInit(): void {
  }

}

I'm loading the spinner and data in a component ngOnInit:

  ngOnInit(): void {

    this.showSpinner();
    setTimeout(() => this.loadData(), 3000);
    this.hideSpinner();
  }

Here are the showSpinner and hideSpinner functions:

private showSpinner(): void {

    const spinnerConfig = new MatDialogConfig();
    spinnerConfig.disableClose = true;
    spinnerConfig.autoFocus = true;
    spinnerConfig.width = '400px';
    spinnerConfig.height = '150px';
    spinnerConfig.closeOnNavigation = false;
    spinnerConfig.disableClose = true;
    spinnerConfig.hasBackdrop = true;

    this.spinner.open(SpinnerComponent, spinnerConfig)
  }

  private hideSpinner(): void {
    this.spinner.closeAll()
  }

The load data methods makes several service calls to get data for drop down fields. This is an example, and there are 4 function calls in total

  private loadData(): void {
    this.projectService.getAllProjects().subscribe((data) => {
      this.projects = data;
    }, (error) => {
      console.log("an error occured in the project service");
    })

Philipp Kief · Accepted Answer · 2022-09-19 10:29:06Z

1

The issue is that you are not awaiting the async process of loading the data. This means that this code is executed synchronously, but the callback inside of the setTimeout method is executed asynchronously:

ngOnInit(): void {
  this.showSpinner();
  setTimeout(() => this.loadData(), 3000);
  this.hideSpinner();
}

As a result, the loading spinner opens, but immediately closes again.

You can fix it by awaiting the result of the loadData method. With this code the execution is paused until the loadData method returns a result:

async ngOnInit() {
  this.showSpinner();
  await this.loadData();
  this.hideSpinner();
}

But to achieve this you have to make sure that the loadData method can be awaited. This can be done like this:

private async loadData() {
  const data = await lastValueFrom(this.projectService.getAllProjects());
  this.projects = data;
}

Now, we're awaiting the response of our projectService with the RxJS operator lastValueFrom. This means that it waits until it got the last value from the HTTP request which is in our case the list of projects. By using the async keyword the loadData method is automatically returning a Promise that can be awaited by our ngOnInit method.

StackBlitz Example

https://stackblitz.com/edit/angular-59cr8m?file=src/app/dialog-overview-example.ts

edited Sep 19, 2022 at 10:29

answered Sep 6, 2022 at 10:05

Philipp Kief

8,6745 gold badges36 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

USMC6072 Over a year ago

Philipp, great answer and it works perfectly. I appreciate the time you put into explaining the issue. I have more studying to do!

Collectives™ on Stack Overflow

Angular "wait" dialog is not displaying

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related