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

My is not showing the loading process. Here is my code:

<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>