Показывать статус загрузки данных с помощью семантического пользовательского интерфейса во время загрузки данных вместо того, чтобы показывать, что с PrimeNg не найдено ни одной записи

Я показываю табличные данные из приложения angular 2 с помощью PrimeNg. Версия PrimeNg, которую я использую, 2.0.4, не подлежит обновлению из-за ограничений конфигурации. В проекте также используется семантический интерфейс.

Когда я нажимаю ссылку, чтобы отобразить таблицу, она показывает «Записи не найдены», хотя данные все еще загружаются в таблицу, и в конечном итоге данные отображаются в таблице после завершения загрузки данных.

Я не хочу показывать «Записи не найдены», вместо этого хотел бы показать семантический загрузчик пользовательского интерфейса (счетчик) во время загрузки данных, а затем показать PrimeNg DataTable после завершения загрузки всех данных.

Я с нетерпением жду подсказок, как соединить эти два. Есть ли атрибут, который отмечает, что данные загружены в таблицу ngprime, и этот атрибут может использоваться для принятия решения о запуске семантического загрузчика пользовательского интерфейса или нет.

------------------------------РЕДАКТИРОВАТЬ------------------- ---------------------

Hi

Я внес следующие изменения, и он работает частично. Часть счетчика обрезается, пока отображается на этапе загрузки данных. Он не изменился даже после того, как я увеличил его размер до среднего.

<div class="ui segment">
    <div class="ui active dimmer" *ngIf="loading">
       <div class="ui medium text loader">Loading table</div>
    </div>

    <p-dataTable  *ngIf="!loading">
         ..........
         ..........
    </p-dataTable>
</div>

Спасибо