Improve loading rows animation.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-07-27 14:12:21 +02:00
parent 2753b6eb9f
commit 478eacbef6
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
4 changed files with 14 additions and 3 deletions

View file

@ -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>

View file

@ -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
View file

@ -0,0 +1,4 @@
tr > td.generic.loader
{
height: 3em;
}

View file

@ -1 +1,5 @@
table.smartable
{
@import "_headings"; @import "_headings";
@import "_loaders";
}