PrimeNg empty message shown even if the data is loaded

I am using PrimeNg table to show the data and have added the empty message template like the following :

<ng-template pTemplate="emptymessage">
   <tr>
     <td>
         No records found
      </td>
    </tr>
 </ng-template>

and I am using lazy loading as the data is fetched from the server. I have added a loading flag, which is changed when the http call is finished. The code is as below:

this.myService
    .myHttpCallFunction(params)
    .pipe(
        finalize(() =>{ this.loading = false;}, 100)
    )
    .subscribe(
        (result: JsendResponse) => this.data = result.data,
         errors => this.errors = errors
    );

I am passing the loading flag to the table and it looks like the following :

 <p-table [value]="data?.data" [columns]="settings.columns" [loading]="loading">

Now it is showing the loading icon for sometime and then the empty message is shown for sometime. Then only it will show the actual data. This is actually confusing as the use might think there is no data as it is showing the empty message.

from PrimeNg empty message shown even if the data is loaded