Show Data Loading status with semantic ui while data is loading instead of showing "No records found" with PrimeNg

I am showing tabular data from an angular 2 application with the help of PrimeNg. The version of the PrimeNg that I am using the 2.0.4 and is not upgradable due to configuration restriction. The project also uses semantic ui.

When I click on the link to show the table, it shows "No records found" even though data is still loading on the table and eventually the data do show up in the table once data loading is complete.

I want to avoid showing "No records found" , instead would like to show semantic ui loader(spinner) while data is loading and then show the PrimeNg DataTable once the whole data loading is complete.

I am looking forward to some hint on how to connect these two. Is there is attribute that flags that data is loaded in ngprime table and that attribute can be used to decide semantic ui loader to spin or not.

------------------------------EDIT----------------------------------------

I made the following changes and it works partially. Part of the spinner is clipped off while shown during data loading phase. It does not behave differently even after I increase its size to medium.

<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>

Thanks

Solution

You can add to your component.ts file a flag loading:boolean = true; when you got your data turn flag to false this.loading = false; then you just use ngIf directive on datatable component *ngIf="!loading" and *ngIf="loading" in your semantic-ui spinner.