Remove loading span, add empty-loading-bar css class, change empty lo…

…ading rows length to 12, remove width logic on empty loading columns (#17515) Co-authored-by: Corbin Robb <corbin@Corbins-MacBook-Pro.local>
apache · Nov 23, 2021 · c216565 · c216565
1 parent 6d66963
commit c216565
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -230,7 +230,7 @@ function ChartList(props: ChartListProps) {
               Header: '',
               id: 'id',
               disableSortBy: true,
-              size: 'xs',
+              size: 'sm',
             },
           ]
         : []),