I have set up a PrimeNg table to display data with an empty message template like this:
<ng-template pTemplate="emptymessage">
<tr>
<td>
No records found
</td>
</tr>
</ng-template>
Additionally, I am using lazy loading for server-side data retrieval. Upon completion of the HTTP call, a loading flag is toggled. Here is the relevant code snippet:
this.myService
.myHttpCallFunction(params)
.pipe(
finalize(() =>{ this.loading = false;}, 100)
)
.subscribe(
(result: JsendResponse) => this.data = result.data,
errors => this.errors = errors
);
The loading flag is passed to the table as follows:
<p-table [value]="data?.data" [columns]="settings.columns" [loading]="loading">
Currently, the interface first displays a loading icon and then the empty message before showing the actual data. This may lead to confusion for users who might mistakenly assume there is no data present due to the premature display of the empty message.