Added Skeleton

fishylunar · Nov 25, 2024 · 93b8f22 · 93b8f22
1 parent 6a94f7f
commit 93b8f22
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/src/components/OdinEventsTable/index.tsx b/src/components/OdinEventsTable/index.tsx
@@ -1,5 +1,6 @@
 import { OdinEvent, OdinEvents } from '@/logic/Odin';
 import { Table, TableBody, TableRow, TableCell, TableHeader } from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
 
 interface OdinEventsTableProps {
   events: OdinEvents | null;
@@ -18,14 +19,35 @@ export function OdinEventsTable({ events }: OdinEventsTableProps) {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {events && events.map((odinEvent: OdinEvent) => (
-            <TableRow key={odinEvent.timestamp}>
-              <TableCell>{odinEvent.responder}</TableCell>
-              <TableCell>{odinEvent.station}</TableCell>
-              <TableCell>{odinEvent.message}</TableCell>
-              <TableCell>{odinEvent.timestamp}</TableCell>
-            </TableRow>
-          ))}
+        {events ? (
+            events.map((odinEvent: OdinEvent) => (
+              <TableRow key={odinEvent.timestamp}>
+                <TableCell>{odinEvent.responder}</TableCell>
+                <TableCell>{odinEvent.station}</TableCell>
+                <TableCell>{odinEvent.timestamp}</TableCell>
+                <TableCell>{odinEvent.message}</TableCell>
+              </TableRow>
+            ))
+          ) : (
+            Array(20)
+              .fill(null)
+              .map((_, index) => (
+                <TableRow key={index}>
+                  <TableCell>
+                    <Skeleton className="w-20 h-4" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="w-20 h-4" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="w-20 h-4" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="w-40 h-4" />
+                  </TableCell>
+                </TableRow>
+              ))
+          )}
         </TableBody>
       </Table>
     </>

diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }