Can anyone help me to find the problem in my angular project's ``` mat- spinnar ``` is not loading properly?

<div class="container" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign.gt-md="space-around center" fxLayoutGap="10px" > <mat-card *ngIf="dish" fxFlex> <mat-card-header> <div mat-grid-avatar></div> <mat-card-title> <h3>{{dish.name|uppercase}}</h3> </mat-card-title> </mat-card-header> <img mat-card-image src={{dish.image}} alt={{dish.name}}/> <mat-card-content> <p>{{dish.description|lowercase}}</p> </mat-card-content> </mat-card> <div fxFlex [hidden]="dish"> <mat-spinner><h4>Loading ... Please Wait </h4></mat-spinner> </div> <mat-card *ngIf="promotion" fxFlex> <mat-card-header> <div mat-grid-avatar></div> <mat-card-title> <h3>{{promotion.name|uppercase}}</h3> </mat-card-title> </mat-card-header> <img mat-card-image src={{promotion.image}} alt={{promotion.name}}/> <mat-card-content> <p>{{promotion.description|lowercase}}</p> </mat-card-content> </mat-card> <div fxFlex [hidden]="promotion"> <mat-spinner></mat-spinner><h4>Loading ... Please Wait </h4> </div> <mat-card *ngIf="leader" fxFlex> <mat-card-header> <div mat-card-avatar></div> <mat-card-title> <h3>{{leader.name|uppercase}}</h3> </mat-card-title> </mat-card-header> <img mat-card-image src={{leader.image}} alt={{leader.name}}/> </mat-card> <div fxFlex [hidden]="leader"> <mat-spinner></mat-spinner><h4>Loading ... Please Wait </h4> </div> </div>