How is the mat-spinner rendered inside the mat-table?

Question

I'm wondering why / how the material spinner is rendering inside the table in this example:

    <div class="course">

        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
            <mat-spinner></mat-spinner>
        </div>

        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
            ....
        </mat-table>
    </div>

The table does not reference the spinner, so how does it render it inside the content area?

Answer 1

It is not rendering the mat-spinner inside mat-table, just using the same css as table body. It seems that the spinner is inside the table but actually it's not, even when dataSource is loading, table's header is present. By assigning same css as table body to spinner container, it seems the spinner is in table body:

<div class="spinner-container" *ngIf="dataSource.loading$ | async">
     <mat-spinner></mat-spinner>
</div>

css:

.spinner-container {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #fafafa; 
  box-shadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)
}

DEMO.