From 1b7e1c2cca7879e5ba56cb72adbe5584bcdee972 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Tue, 3 Dec 2024 16:21:32 +0100
Subject: [PATCH] NORY-15: add data-table fallback component

This component can be used as suspense fallback for data tables
---
 .../src/components/ui/data-table-fallback.tsx | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 dashboard/src/components/ui/data-table-fallback.tsx

diff --git a/dashboard/src/components/ui/data-table-fallback.tsx b/dashboard/src/components/ui/data-table-fallback.tsx
new file mode 100644
index 0000000..0825b14
--- /dev/null
+++ b/dashboard/src/components/ui/data-table-fallback.tsx
@@ -0,0 +1,53 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface DataTableFallbackProps {
+    columnCount: number,
+    rowCount: number,
+}
+
+export async function DataTableFallback({ columnCount, rowCount }: DataTableFallbackProps) {
+
+    const columns: string[] = [];
+    for (let i = 0; i < columnCount; i++) {
+        columns.push('');
+    }
+
+    const rows: string[] = [];
+    for (let i = 0; i < rowCount; i++) {
+        rows.push('');
+    }
+
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    {
+                        columns.map((_, index) => {
+                            return (
+                                <TableHead key={index}>
+                                    <Skeleton className="w-20 h-6"/>
+                                </TableHead>
+                            );
+                        })
+                    }
+                </TableHeader>
+                <TableBody>
+                    {
+                        rows.map((_, index) =>
+                            <TableRow key={index} className="h-4">
+                                {
+                                    columns.map((_, index) =>
+                                        <TableCell key={index} className="h-4">
+                                            <Skeleton className="w-full h-4"/>
+                                        </TableCell>,
+                                    )
+                                }
+                            </TableRow>,
+                        )
+                    }
+                </TableBody>
+            </Table>
+        </div>
+    );
+}