initial commit

web/src/components/layout/LoadingBlock.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from '../ui/Skeleton.tsx'
+import { cn } from '../../lib/cn.ts'
+
+export function LoadingBlock({ rows = 5, className }: { rows?: number; className?: string }) {
+  const count = Math.max(1, Math.min(rows, 50))
+  return (
+    <div className={cn('flex w-full flex-col gap-2', className)} aria-busy="true" aria-live="polite">
+      <span className="sr-only">Loading…</span>
+      {Array.from({ length: count }, (_, index) => (
+        <div key={index} className="flex items-center gap-3">
+          <Skeleton className="h-4 w-1/4" />
+          <Skeleton className="h-4 flex-1" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+      ))}
+    </div>
+  )
+}