Enhance data table loading states

src/components/data-table/ha-data-table.ts

@@ -123,6 +123,8 @@ export class HaDataTable extends LitElement {
 
   @property({ type: Array }) public data: DataTableRowData[] = [];
 
+  @property({ type: Boolean }) public loading = false;
+
   @property({ type: Boolean }) public selectable = false;
 
   @property({ type: Boolean }) public clickable = false;
@@ -141,6 +143,8 @@ export class HaDataTable extends LitElement {
 
   @property({ attribute: false }) public noDataText?: string;
 
+  @property({ attribute: false }) public loadingText?: string;
+
   @property({ attribute: false }) public searchLabel?: string;
 
   @property({ type: String }) public filter = "";
@@ -165,6 +169,8 @@ export class HaDataTable extends LitElement {
 
   @state() private _filteredData?: DataTableRowData[];
 
+  @state() private _processing = false;
+
   @state() private _headerHeight = 0;
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
@@ -514,7 +520,7 @@ export class HaDataTable extends LitElement {
             </slot>
           </div>
           ${
-            !this._filteredData?.length
+            this.loading || !this._filteredData?.length
               ? html`
                   <div class="mdc-data-table__content">
                     <div class="mdc-data-table__row" role="row">
@@ -523,8 +529,11 @@ export class HaDataTable extends LitElement {
                         role="cell"
                       >
                         ${
+                          this.loading ||
+                          this._processing ||
                           !this._filteredData
-                            ? this._i18n?.localize?.("ui.common.loading") ||
+                            ? this.loadingText ||
+                              this._i18n?.localize?.("ui.common.loading") ||
                               "Loading"
                             : this.data.length
                               ? this._i18n?.localize?.(
@@ -712,6 +721,7 @@ export class HaDataTable extends LitElement {
     value !== undefined && value !== null && value !== "" && value !== nothing;
 
   private async _sortFilterData() {
+    this._processing = true;
     const startTime = new Date().getTime();
     const timeBetweenUpdate = startTime - this._lastUpdate;
     const timeBetweenRequest = startTime - this._curRequest;
@@ -762,6 +772,10 @@ export class HaDataTable extends LitElement {
 
     this._lastUpdate = startTime;
     this._filteredData = data;
+
+    if (this._curRequest === startTime) {
+      this._processing = false;
+    }
   }
 
   private _groupData = memoizeOne(

src/panels/config/tools/statistics/tools-statistics.ts

@@ -108,6 +108,8 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _data: StatisticData[] = [] as StatisticsMetaData[];
 
+  @state() private _loading = true;
+
   @state() private filter = "";
 
   @state() private _selected: string[] = [];
@@ -554,6 +556,10 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         }
         <ha-data-table
           .narrow=${this.narrow}
+          .loading=${this._loading}
+          .loadingText=${this._i18n.localize(
+            "ui.components.statistics_charts.loading_statistics"
+          )}
           .columns=${columns}
           .data=${this._displayData(
             this._data,
@@ -754,6 +760,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         });
       }
     });
+    this._loading = false;
   }
 
   private _clearSelected = async () => {