feat(dashboards): allow for optional rendering of columns in placehol… (#95268)

### Changes

Added optional column related props to the loading placeholder in
`TableWidgetVisualization`. Many of the tables that use `GridEditable`
(ex. widget viewer modal) persist column headers between loads.

Author: lzhao-sentry

static/app/views/dashboards/widgets/tableWidget/tableWidgetVisualization.stories.tsx

@@ -405,6 +405,16 @@ function getRenderer(fieldName: string) {
           used as a loading placeholder
         </p>
         <TableWidgetVisualization.LoadingPlaceholder />
+        <p>
+          Optionally, you can pass the
+          <code>columns</code>
+          prop to render them in the loading placeholder. You can also pass
+          <code>aliases</code> to apply custom names to columns. Note: sorting and
+          resizing are disabled in the loading placeholder.
+        </p>
+        <TableWidgetVisualization.LoadingPlaceholder
+          columns={customColumns.map(column => ({...column, width: -1}))}
+        />
       </Fragment>
     );
   });

static/app/views/dashboards/widgets/tableWidget/tableWidgetVisualization.tsx

@@ -280,9 +280,40 @@ export function TableWidgetVisualization(props: TableWidgetVisualizationProps) {
   );
 }
 
-TableWidgetVisualization.LoadingPlaceholder = function () {
+TableWidgetVisualization.LoadingPlaceholder = function ({
+  columns,
+  aliases,
+}: {
+  aliases?: Record<string, string>;
+  columns?: TabularColumn[];
+}) {
+  const columnsWithName = columns?.map(column => ({...column, name: column.key})) ?? [];
   return (
-    <GridEditable isLoading columnOrder={[]} columnSortBy={[]} data={[]} grid={{}} />
+    <GridEditable
+      isLoading
+      columnOrder={columnsWithName}
+      columnSortBy={[]}
+      data={[]}
+      resizable={false}
+      grid={{
+        renderHeadCell: (_tableColumn, columnIndex) => {
+          if (!columns) return null;
+          const column = columns[columnIndex]!;
+          const align = fieldAlignment(column.key, column.type as ColumnValueType);
+          const name = aliases?.[column.key] || column.key;
+
+          return (
+            <SortLink
+              canSort={false}
+              align={align}
+              title={<StyledTooltip title={name}>{name}</StyledTooltip>}
+              direction={undefined}
+              generateSortLink={() => undefined}
+            />
+          );
+        },
+      }}
+    />
   );
 };