refactor(frontend): create shared/ui layer with skeleton components

apps/frontend/src/components/SkeletonBlock.tsx

@@ -1,20 +1 @@
-export function SkeletonBlock({
+export { SkeletonBlock } from '../shared/ui/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

@@ -1,25 +1 @@
-import { SkeletonBlock } from './SkeletonBlock';
+export { TableSkeleton } from '../shared/ui/TableSkeleton';
-
-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>
-  );
-}

apps/frontend/src/shared/ui/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/shared/ui/TableSkeleton.tsx

@@ -0,0 +1,25 @@
+import { SkeletonBlock } from '@/shared/ui/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>
+  );
+}

apps/frontend/src/shared/ui/index.ts

@@ -0,0 +1,2 @@
+export { SkeletonBlock } from './SkeletonBlock';
+export { TableSkeleton } from './TableSkeleton';