sarlink-portal/components/device-table-skeleton.tsx

import { Skeleton } from "@/components/ui/skeleton";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

type TableSkeletonProps = {
	headers: string[];
	length: number;
};

export default function TableSkeleton({ headers, length }: TableSkeletonProps) {
	return (
		<>
			<div className="hidden sm:block w-full">
				<Table className="overflow-scroll w-full">
					<TableHeader>
						<TableRow>
							{headers.map((header, index) => (
								<TableHead key={`${index + 1}`}>{header}</TableHead>
							))}
						</TableRow>
					</TableHeader>
					<TableBody className="overflow-scroll">
						{Array.from({ length }).map((_, i) => (
							<TableRow key={`${i + 1}`}>
								{headers.map((_, index) => (
									<TableCell key={`${index + 1}`}>
										<Skeleton className="w-full h-10 rounded" />
									</TableCell>
								))}
							</TableRow>
						))}
					</TableBody>
				</Table>
			</div>
			<div className="sm:hidden my-4 w-full">
				{Array.from({ length }).map((_, i) => (
					<DeviceCardSkeleton key={`${i + 1}`} />
				))}
			</div>
		</>
	);
}

function DeviceCardSkeleton() {
	return (
		<div
			className={cn(
				"flex text-sm justify-between items-center my-2 p-4 border rounded-md w-full",
			)}
		>
			<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
				<Skeleton className="w-32 h-6" />
				<Skeleton className="w-36 h-6" />
				<Skeleton className="w-32 h-4" />
				<Skeleton className="w-40 h-8" />
			</div>
		</div>
	);
}