How can I hide an empty row in angular material when the table is loading?

Question

I am trying to display a loading spinner on a material table when the frontend is waiting for the backend. I have no problem doing that, the problem is that the empty row is displayed during this loading time and does not look good.

I was using this code:

                    <tr class="mat-row" *matNoDataRow>
                        <td class="mat-cell" [colSpan]="displayedColumns.length">
                            <ng-container *ngIf="!errorLoadingResults && !isLoadingResults">
                                No categories found.
                            </ng-container>
                            <ng-container *ngIf="errorLoadingResults && !isLoadingResults">
                                <span class="error_loading">
                                    There was an error getting the categories.
                                </span>
                            </ng-container>
                        </td>
                    </tr>

My first idea was to encapsulate the whole row in a ng-container:

<ng-container *ngIf="islLoadingResults">
                        <tr class="mat-row" *matNoDataRow>
                            <td class="mat-cell" [colSpan]="displayedColumns.length">
                                <ng-container *ngIf="!errorLoadingResults">
                                    No elements found.
                                </ng-container>
                                <ng-container *ngIf="errorLoadingResults">
                                    <span class="error_loading">
                                        There was an error getting the elements.
                                    </span>
                                </ng-container>
                            </td>
                        </tr>
                    </ng-container>

But then it seems like the table does not load the tr at all. The first try renders the empty row while the spinner is loading. How can I solve this issue during this short amount of time when the subscriber is waiting for the response and the datasource is still empty but I can not confirm that I got an error or if the datasource is empty?:

Answer 1

As a patch, not sure if it is the right way I added a class to hide it and it seems to work fine:

.empty-dataset__hidden{
  display: none;
}

And then in the html:

<tr class="mat-row" *matNoDataRow [ngClass]="{'empty-dataset__hidden': isLoadingResults}">
...
</tr>