Spinner too late

Question

In an angular app I have a table and some buttons with which I am changing the data source for the table. I subscribed to the data list with an async pipe in the html. When switching between the data lists, I would like to show a spinner. I toggle the switch for the spinner when switching the data lists, but the spinner appears only after the new list has already been rendered in the html.

<tr>
    <ng-container *ngFor="let item of dataList$ | async">
        <td>{{item.id}}</td>
    </ng-container>
</tr>


public switchDataList(input) {
    this.someService.showSpinner();
    this.dataList$.next(newDataList)
    ...
}

public showSpinner() {
    this.spinner = true;
}



<p-dialog [(visible)]="someService.spinner" modal="modal" [baseZIndex]="10000" [draggable]="false" [resizable]="false"
    [closeOnEscape]="false" [closable]="false">
    <div style="text-align: center;">
        <i class="spinner fa fa-spinner fa-pulse fa-3x"></i>
    </div>
</p-dialog>

Answer 1

Figured it out. To put the whole code concerning switching the data list in a setTimeout did it.

public switchDataList(input) {
    this.someService.showSpinner();
    setTimeout(() => this.dataList$.next(newDataList))
    ...
}