From d7b5a376a03a73bc730f925813d5951ef65f5ef8 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Wed, 17 Jun 2026 14:44:15 +0300
Subject: [PATCH] feat(frontend): add SkeletonBlock and TableSkeleton
 components

---
 .../frontend/src/components/SkeletonBlock.tsx | 20 +++++++++++++++
 .../frontend/src/components/TableSkeleton.tsx | 25 +++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 apps/frontend/src/components/SkeletonBlock.tsx
 create mode 100644 apps/frontend/src/components/TableSkeleton.tsx

diff --git a/apps/frontend/src/components/SkeletonBlock.tsx b/apps/frontend/src/components/SkeletonBlock.tsx
new file mode 100644
index 0000000..0419c7f
--- /dev/null
+++ b/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,
+      }}
+    />
+  );
+}
diff --git a/apps/frontend/src/components/TableSkeleton.tsx b/apps/frontend/src/components/TableSkeleton.tsx
new file mode 100644
index 0000000..79748f7
--- /dev/null
+++ b/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>
+  );
+}