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>
This commit is contained in:
Corbin Robb 2021-11-23 16:13:53 -07:00 committed by GitHub
parent 6d66963489
commit c216565190
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 6 deletions

View File

@ -121,6 +121,12 @@ export const Table = styled.table`
} }
} }
.empty-loading-bar {
display: inline-block;
width: 100%;
height: 1.2em;
}
&:after { &:after {
position: absolute; position: absolute;
transform: translateY(-50%); transform: translateY(-50%);
@ -257,7 +263,7 @@ export default React.memo(
<tbody {...getTableBodyProps()}> <tbody {...getTableBodyProps()}>
{loading && {loading &&
rows.length === 0 && rows.length === 0 &&
[...new Array(25)].map((_, i) => ( [...new Array(12)].map((_, i) => (
<tr key={i}> <tr key={i}>
{columns.map((column, i2) => { {columns.map((column, i2) => {
if (column.hidden) return null; if (column.hidden) return null;
@ -266,12 +272,13 @@ export default React.memo(
key={i2} key={i2}
className={cx('table-cell', { className={cx('table-cell', {
'table-cell-loader': loading, 'table-cell-loader': loading,
[column.size || '']: column.size,
})} })}
> >
<span className="loading-bar" role="progressbar"> <span
<span>LOADING</span> className="loading-bar empty-loading-bar"
</span> role="progressbar"
aria-label="loading"
/>
</td> </td>
); );
})} })}

View File

@ -230,7 +230,7 @@ function ChartList(props: ChartListProps) {
Header: '', Header: '',
id: 'id', id: 'id',
disableSortBy: true, disableSortBy: true,
size: 'xs', size: 'sm',
}, },
] ]
: []), : []),