Загрузка заполнителя с помощью ngIf и асинхронного канала?

Question

В моем приложении Angular у меня есть <form> с полем <select>, параметры которого выбираются во время выполнения с сервера. Пока HTTP-запрос находится в состоянии ожидания, я показываю заполнитель значка загрузки, используя ngIf / else:

<div class="form-group row">
    <label for="nameInput" class="col-3 col-form-label-sm">Name</label>
    <div class="col">
        <select *ngIf="(listOfNames$ | async) as listOfNames; else loading" 
            id="nameInput" class="form-control form-control-sm" formControlName="name">
            <option *ngFor="let option of listOfNames" [value]="option">{{ option }}</option>
        </select>
    </div>
</div>

<ng-template #loading>
    <div class="form-control form-control-sm">
        <div class="loading-spinner-anim"></div>     
    </div>
</ng-template>

Это прекрасно работает , за исключением , это обычный случай использования Observable listOfNames$ для разрешения пустого массива, и когда это происходит, он показывает шаблон #loading бесконечно, потому что в *ngIf директива, пустой массив - ложь , поэтому else отображается.

Как я могу переписать это, чтобы показывать «загрузку» только тогда, когда Observable listOfNames$ не завершен, и показывать что-то еще , если оно разрешается в пустой массив?

Заранее спасибо!