apps/frontend/src/components/SkeletonBlock.tsx

@@ -0,0 +1,20 @@
+export function SkeletonBlock({
+  width,
+  height,
+  borderRadius = 4,
+}: {
+  width?: string | number;
+  height?: string | number;
+  borderRadius?: number;
+}) {
+  return (
+    <div
+      className="skeleton"
+      style={{
+        width: width ?? '100%',
+        height: height ?? 16,
+        borderRadius,
+      }}
+    />
+  );
+}

apps/frontend/src/components/TableSkeleton.tsx

@@ -0,0 +1,25 @@
+import { SkeletonBlock } from './SkeletonBlock';
+
+const tdStyle = {
+  borderBottom: '1px solid #eeeeee',
+  padding: '10px 8px',
+  verticalAlign: 'top',
+} satisfies React.CSSProperties;
+
+type Column = { width: string };
+
+export function TableSkeleton({ rows = 5, columns }: { rows?: number; columns: Column[] }) {
+  return (
+    <tbody>
+      {Array.from({ length: rows }).map((_, i) => (
+        <tr key={i}>
+          {columns.map((col, j) => (
+            <td key={j} style={tdStyle}>
+              <SkeletonBlock height={12} width={col.width} />
+            </td>
+          ))}
+        </tr>
+      ))}
+    </tbody>
+  );
+}