Improve loading rows and cells animations.
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 c8601aaa30
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
5 changed files with 15 additions and 4 deletions

View file

@ -74,5 +74,5 @@ export function CellInstance<T>({cell}: {cell: CellDefinition<T>})
*/ */
export function CellLoader() export function CellLoader()
{ {
return <td className={"loading"}><SpinningLoader /></td>; return <td className={"generic loader"}></td>;
} }

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:first-child:last-child
{
height: 3em;
}

View file

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