David
9fc7d3a2e0
- Implemented asset and resource list query state helpers to manage loading, error, and availability states. - Created EntityListStatus component for displaying status messages and retry options based on entity list state. - Added EntityTableSkeleton component for rendering loading placeholders in tables. - Defined EntityListState type and entityListState function for consistent state management across components. - Developed comprehensive UI tests for list states using Playwright, covering various scenarios including loading, error handling, and responsiveness.
24 lines
801 B
TypeScript
24 lines
801 B
TypeScript
import { Skeleton } from "@repo/shadcn-ui/components/skeleton";
|
|
import { TableCell, TableRow } from "@repo/shadcn-ui/components/table";
|
|
|
|
/** Reserva la primera página sin fabricar entidades, totales ni acciones accesibles. */
|
|
export function EntityTableSkeleton({
|
|
columns,
|
|
rows,
|
|
}: {
|
|
columns: readonly { id: string; className: string }[];
|
|
rows: number;
|
|
}) {
|
|
return Array.from({ length: Math.min(rows, 10) }, (_, index) => `placeholder-${index}`).map(
|
|
(id) => (
|
|
<TableRow aria-hidden="true" data-slot="entity-table-skeleton-row" key={id}>
|
|
{columns.map((column) => (
|
|
<TableCell className={column.className} key={column.id}>
|
|
<Skeleton className="h-3 w-3/4 motion-reduce:animate-none" />
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
)
|
|
);
|
|
}
|