docs(test): document and expand coverage for configurable table-skeleton rows (#609)

components/ui/table-skeleton.test.tsx

@@ -22,6 +22,25 @@ describe("TableSkeleton", () => {
     expect(rows).toHaveLength(3);
   });
 
+  it("renders a larger custom row count", () => {
+    const { container } = render(<TableSkeleton rows={10} />);
+    const rows = container.querySelector(".divide-y")?.children;
+    expect(rows).toHaveLength(10);
+  });
+
+  it("renders zero body rows when rows={0}", () => {
+    const { container } = render(<TableSkeleton rows={0} />);
+    const rows = container.querySelector(".divide-y")?.children;
+    expect(rows).toHaveLength(0);
+  });
+
+  it("keeps the header unaffected by the rows prop", () => {
+    const { container } = render(<TableSkeleton rows={2} />);
+    const headerCells = container.querySelector(".border-b")?.children;
+    expect(headerCells).toHaveLength(6);
+    expect(container.querySelector(".divide-y")?.children).toHaveLength(2);
+  });
+
   it("renders the header by default", () => {
     const { container } = render(<TableSkeleton />);
     const headerCells = container.querySelectorAll(".border-b .bg-\\[\\#2D2D2D\\]");
@@ -72,6 +91,18 @@ describe("TransactionTableSkeleton", () => {
     expect(rows).toHaveLength(3);
   });
 
+  it("renders a larger custom row count", () => {
+    const { container } = render(<TransactionTableSkeleton rows={10} />);
+    const rows = container.querySelectorAll(".divide-y > div");
+    expect(rows).toHaveLength(10);
+  });
+
+  it("renders zero body rows when rows={0}", () => {
+    const { container } = render(<TransactionTableSkeleton rows={0} />);
+    const rows = container.querySelectorAll(".divide-y > div");
+    expect(rows).toHaveLength(0);
+  });
+
   it("renders a header row", () => {
     const { container } = render(<TransactionTableSkeleton />);
     const header = container.querySelector(".border-b");

components/ui/table-skeleton.tsx

@@ -2,12 +2,28 @@ import { SkeletonAvatar, SkeletonLine } from "./skeleton";
 import { cn } from "@/utils/commonUtils";
 
 interface TableSkeletonProps {
+  /** Number of grid columns per row. Defaults to `6`. */
   columns?: number;
+  /** Number of skeleton body rows. Defaults to `6` for backward compatibility. */
   rows?: number;
+  /** Whether to render the header row. Defaults to `true`. */
   showHeader?: boolean;
   className?: string;
 }
 
+/**
+ * TableSkeleton - generic table-shaped loading placeholder.
+ *
+ * Renders an optional header row followed by `rows` skeleton body rows, each
+ * split into `columns` cells. Pass a context-appropriate `rows` value so the
+ * placeholder matches the real loaded content (e.g. a paginated transactions
+ * table vs. a short notifications list).
+ *
+ * @example
+ * ```tsx
+ * <TableSkeleton columns={4} rows={8} />
+ * ```
+ */
 export function TableSkeleton({
   columns = 6,
   rows = 6,
@@ -52,6 +68,17 @@ export function TableSkeleton({
   );
 }
 
+/**
+ * TransactionTableSkeleton - transaction-specific table loading placeholder.
+ *
+ * Uses the transaction column layout (asset, counterparty, amount, token,
+ * date, status) and renders `rows` skeleton body rows. Defaults to `6` rows.
+ *
+ * @example
+ * ```tsx
+ * <TransactionTableSkeleton rows={TRANSACTIONS_PAGE_SIZE} />
+ * ```
+ */
 export function TransactionTableSkeleton({ rows = 6 }: { rows?: number }) {
   return (
     <div className="w-full">