From c8601aaa306446790fded65c910416507f3dafb7 Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Sat, 27 Jul 2024 14:12:21 +0200
Subject: [PATCH] Improve loading rows and cells animations.

---
 src/Smartable/Cell.tsx     | 2 +-
 src/Smartable/Instance.tsx | 2 +-
 src/Smartable/Row.tsx      | 5 ++++-
 src/styles/_loaders.less   | 4 ++++
 src/styles/smartable.less  | 6 +++++-
 5 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/_loaders.less

diff --git a/src/Smartable/Cell.tsx b/src/Smartable/Cell.tsx
index fbd00ed..70e77f2 100644
--- a/src/Smartable/Cell.tsx
+++ b/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>;
 }
diff --git a/src/Smartable/Instance.tsx b/src/Smartable/Instance.tsx
index 949aa7c..2d44810 100644
--- a/src/Smartable/Instance.tsx
+++ b/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>
diff --git a/src/Smartable/Row.tsx b/src/Smartable/Row.tsx
index eb15871..ac66003 100644
--- a/src/Smartable/Row.tsx
+++ b/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>
 	)
 }
diff --git a/src/styles/_loaders.less b/src/styles/_loaders.less
new file mode 100644
index 0000000..4b81730
--- /dev/null
+++ b/src/styles/_loaders.less
@@ -0,0 +1,4 @@
+tr > td.generic.loader:first-child:last-child
+{
+	height: 3em;
+}
diff --git a/src/styles/smartable.less b/src/styles/smartable.less
index c560608..b1d009f 100644
--- a/src/styles/smartable.less
+++ b/src/styles/smartable.less
@@ -1 +1,5 @@
-@import "_headings";
+table.smartable
+{
+	@import "_headings";
+	@import "_loaders";
+}