From c216565190bc73e065b16c884d581e80df408a5c Mon Sep 17 00:00:00 2001
From: Corbin Robb <31329271+corbinrobb@users.noreply.github.com>
Date: Tue, 23 Nov 2021 16:13:53 -0700
Subject: [PATCH] Remove loading span, add empty-loading-bar css class, change
 empty loading rows length to 12, remove width logic on empty loading columns
 (#17515)

Co-authored-by: Corbin Robb <corbin@Corbins-MacBook-Pro.local>
---
 .../src/components/TableCollection/index.tsx    | 17 ++++++++++++-----
 .../src/views/CRUD/chart/ChartList.tsx          |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/components/TableCollection/index.tsx b/superset-frontend/src/components/TableCollection/index.tsx
index b8f644fe656fa..f2dec54da13d4 100644
--- a/superset-frontend/src/components/TableCollection/index.tsx
+++ b/superset-frontend/src/components/TableCollection/index.tsx
@@ -121,6 +121,12 @@ export const Table = styled.table`
       }
     }
 
+    .empty-loading-bar {
+      display: inline-block;
+      width: 100%;
+      height: 1.2em;
+    }
+
     &:after {
       position: absolute;
       transform: translateY(-50%);
@@ -257,7 +263,7 @@ export default React.memo(
       <tbody {...getTableBodyProps()}>
         {loading &&
           rows.length === 0 &&
-          [...new Array(25)].map((_, i) => (
+          [...new Array(12)].map((_, i) => (
             <tr key={i}>
               {columns.map((column, i2) => {
                 if (column.hidden) return null;
@@ -266,12 +272,13 @@ export default React.memo(
                     key={i2}
                     className={cx('table-cell', {
                       'table-cell-loader': loading,
-                      [column.size || '']: column.size,
                     })}
                   >
-                    <span className="loading-bar" role="progressbar">
-                      <span>LOADING</span>
-                    </span>
+                    <span
+                      className="loading-bar empty-loading-bar"
+                      role="progressbar"
+                      aria-label="loading"
+                    />
                   </td>
                 );
               })}
diff --git a/superset-frontend/src/views/CRUD/chart/ChartList.tsx b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
index 6eed27e6c21d8..7830d5d610897 100644
--- a/superset-frontend/src/views/CRUD/chart/ChartList.tsx
+++ b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
@@ -230,7 +230,7 @@ function ChartList(props: ChartListProps) {
               Header: '',
               id: 'id',
               disableSortBy: true,
-              size: 'xs',
+              size: 'sm',
             },
           ]
         : []),