chore: add skeletons to tables and loading.tsx files for routes and run formatting ♻️

components/device-table-skeleton.tsx

@@ -0,0 +1,66 @@
+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>
+	);
+}