Improve loading rows animation.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
2753b6eb9f
commit
478eacbef6
4 changed files with 14 additions and 3 deletions
|
@ -21,7 +21,7 @@ export interface InstanceProperties<CK extends ColumnKey> extends SmartablePrope
|
||||||
export function Instance<CK extends ColumnKey>({columns}: InstanceProperties<CK>)
|
export function Instance<CK extends ColumnKey>({columns}: InstanceProperties<CK>)
|
||||||
{
|
{
|
||||||
return (
|
return (
|
||||||
<table>
|
<table className={"smartable"}>
|
||||||
<thead>
|
<thead>
|
||||||
<ColumnsHeadings columns={columns} />
|
<ColumnsHeadings columns={columns} />
|
||||||
</thead>
|
</thead>
|
||||||
|
|
|
@ -125,7 +125,10 @@ export function RowInstance<CK extends ColumnKey>({row}: { row: CurrentRowData<C
|
||||||
*/
|
*/
|
||||||
export function RowLoader()
|
export function RowLoader()
|
||||||
{
|
{
|
||||||
|
// Get table columns to get their count.
|
||||||
|
const {columns} = useTable();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr className={"generic loader"}></tr>
|
<tr><td colSpan={Object.keys(columns).length} className={"generic loader"}></td></tr>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
4
src/styles/_loaders.less
Normal file
4
src/styles/_loaders.less
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
tr > td.generic.loader
|
||||||
|
{
|
||||||
|
height: 3em;
|
||||||
|
}
|
|
@ -1 +1,5 @@
|
||||||
|
table.smartable
|
||||||
|
{
|
||||||
@import "_headings";
|
@import "_headings";
|
||||||
|
@import "_loaders";
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue