How to show Mat-dialog opening/loading indicator

Question

I am using mat dialog to create a dialog box with 100's of input boxes. So it will take few seconds to load. I want to show a busy indicator when the dialog is loading.

Very simple code. On a button click I set a boolean to true and call dialog.open(). Then set it to false on dialogRef.afterOpened() event.

But the boolean doesnt get set to true until the dialog.open() event is completed. I can't figure out why.

StackBlitz here https://stackblitz.com/edit/angular-d6nfhr

Enter value of say, 1000; I am expecting the text 'Dialog opening...' (near to Add button) to appear soon after I click Add button. But it flashes for a second after the dialog is ready.

Hey, Can you try something like, to show the mat-dialog first and then show a loading icon inside the mat-dialog until the data/Ui gets populated. — nitin9nair
I would do that. But neither the dialog nor the text in the overlay seem to appear before the data is fully populated. — Josf

nitin9nair nitin9nair · Accepted Answer · 2019-07-05T10:33:35

The solution does not answer the question as per the intended question but will act as a workaround solution.

Solution

Instead of showing the loading icon when loading any number of data, as per UX, it better for the user to show a limited number of input boxes and add a button that will add more input text field in a dialog box.

dialog.component.ts

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {
  animals: any[] = [];
  getTotalCountVal = null;
  start: number = 0;
  end: number = 20;
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  ngOnInit() {
    this.getTotalCountVal = this.data.totalCount;

    if (this.getTotalCountVal) {
      for (let i = 0; i < this.data.totalCount; i++) {
        this.animals.push('');
      }

    }
  }

  loadMore() {
    if(this.end < this.getTotalCountVal) {
      this.end += 20;
    }
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

dialog.component.html

<h1 mat-dialog-title>Total - {{data.totalCount}}</h1>
<div mat-dialog-content>
    <p>Add favorite animals</p>
    <ng-container *ngFor="let animal of animals | slice: start: end; let index=index">
        <mat-form-field>
            <input matInput [(ngModel)]="animal" name ="animal">
      </mat-form-field>
      </ng-container>
    <button *ngIf="end < animals.length" mat-raised-button color="primary" (click)="loadMore()">Add more animals</button>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="animals" cdkFocusInitial>Ok</button>
</div>

stackblitz working demo

How to show Mat-dialog opening/loading indicator

1 Answers