Add loader to striped table

nekiro · Nov 26, 2024 · 6b8d233 · 6b8d233
1 parent b675778
commit 6b8d233
Showing 1 changed file with 23 additions and 8 deletions.
diff --git a/src/components/StrippedTable.tsx b/src/components/StrippedTable.tsx
@@ -1,13 +1,19 @@
 import React from "react";
 import Link from "./Link";
-import { Table, Thead, Tbody, Tr, Th, Td } from "@chakra-ui/react";
+import { Table, Thead, Tbody, Tr, Th, Td, Text } from "@chakra-ui/react";
+import Loader from "./Loader";
 
 export interface StripedTableProps {
 	head?: { text: string }[];
 	body: { text: string | number; href?: string }[][];
+	isLoading?: boolean;
 }
 
-const StripedTable = ({ head, body }: StripedTableProps) => {
+const StripedTable = ({ head, body, isLoading }: StripedTableProps) => {
+	if (isLoading) {
+		return <Loader />;
+	}
+
 	return (
 		<Table variant="simple">
 			{head && (
@@ -19,14 +25,23 @@ const StripedTable = ({ head, body }: StripedTableProps) => {
 					</Tr>
 				</Thead>
 			)}
+
 			<Tbody>
-				{body.map((row, index) => (
-					<Tr key={`${index}`}>
-						{row.map((data, dataIndex) => (
-							<Td key={`${data.text} ${dataIndex}`}>{data.href ? <Link href={data.href} text={String(data.text)} /> : data.text}</Td>
-						))}
+				{body.length === 0 ? (
+					<Tr>
+						<Td>
+							<Text>No data.</Text>
+						</Td>
 					</Tr>
-				))}
+				) : (
+					body.map((row, index) => (
+						<Tr key={`${index}`}>
+							{row.map((data, dataIndex) => (
+								<Td key={`${data.text} ${dataIndex}`}>{data.href ? <Link href={data.href} text={String(data.text)} /> : data.text}</Td>
+							))}
+						</Tr>
+					))
+				)}
 			</Tbody>
 		</Table>
 	);