Improve loading rows and cells animations.

src/Smartable/Cell.tsx

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

src/Smartable/Instance.tsx

@@ -21,7 +21,7 @@ export interface InstanceProperties<CK extends ColumnKey> extends SmartablePrope
 export function Instance<CK extends ColumnKey>({columns}: InstanceProperties<CK>)
 {
 	return (
-		<table>
+		<table className={"smartable"}>
 			<thead>
 			<ColumnsHeadings columns={columns} />
 			</thead>

src/Smartable/Row.tsx

@@ -125,7 +125,10 @@ export function RowInstance<CK extends ColumnKey>({row}: { row: CurrentRowData<C
  */
 export function RowLoader()
 {
+	// Get table columns to get their count.
+	const {columns} = useTable();
+
 	return (
-		<tr className={"generic loader"}></tr>
+		<tr><td colSpan={Object.keys(columns).length} className={"generic loader"}></td></tr>
 	)
 }

src/styles/_loaders.less

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

src/styles/smartable.less

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