HParams: Add loading spinner (#6491)

## Motivation for features / changes
The previous runs table showed a spinner when the data was still
loading. I am just reusing the existing logic to show a spinner in the
new one as well.

## Screenshots of UI changes (or N/A)
A wild spinner appears

![image](https://github.com/tensorflow/tensorboard/assets/78179109/15324605-001e-4e9a-916d-4111a75a19b3)

Dark Mode

![image](https://github.com/tensorflow/tensorboard/assets/78179109/82b0090e-a68c-479c-b60b-8beb3ed2810b)

Author: rileyajones

tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html

@@ -23,7 +23,11 @@
     placeholder="Filter runs (regex)"
   ></tb-filter-input>
 </div>
+<div *ngIf="loading" class="loading">
+  <mat-spinner mode="indeterminate" diameter="28"></mat-spinner>
+</div>
 <tb-data-table
+  *ngIf="!loading"
   [headers]="headers"
   [sortingInfo]="sortingInfo"
   [columnCustomizationEnabled]="true"

tensorboard/webapp/runs/views/runs_table/runs_data_table.scss

@@ -121,3 +121,13 @@ tb-data-table-header-cell:last-of-type {
     flex-grow: 1;
   }
 }
+
+.loading {
+  align-items: center;
+  border: 0;
+  @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+  display: flex;
+  height: 48px;
+  padding: 0 24px;
+  justify-content: center;
+}

tensorboard/webapp/runs/views/runs_table/runs_data_table.ts

@@ -40,6 +40,7 @@ export class RunsDataTable {
   @Input() regexFilter!: string;
   @Input() isFullScreen!: boolean;
   @Input() selectableColumns!: ColumnHeader[];
+  @Input() loading!: boolean;
 
   ColumnHeaderType = ColumnHeaderType;
 

tensorboard/webapp/runs/views/runs_table/runs_table_container.ts

@@ -99,7 +99,6 @@ import {
   getFilteredRenderableRunsFromRoute,
   getPotentialHparamColumns,
 } from '../../../metrics/views/main_view/common_selectors';
-import {RunToHParamValues} from '../../data_source/runs_data_source_types';
 import {runsTableFullScreenToggled} from '../../../core/actions';
 
 const getRunsLoading = createSelector<
@@ -280,6 +279,7 @@ function matchFilter(
       [experimentIds]="experimentIds"
       [regexFilter]="regexFilter$ | async"
       [isFullScreen]="runsTableFullScreen$ | async"
+      [loading]="loading$ | async"
       (sortDataBy)="sortDataBy($event)"
       (orderColumns)="orderColumns($event)"
       (onSelectionToggle)="onRunSelectionToggle($event)"