I need a skeleton component for a loding state othis other component: import { CircleIcon } from "lucide-react" import api from "@/lib/api" import { Badge } from "@/components/ui/badge" export default async function PositionDetails({ positionId, }: { positionId: string }) { const position = await api.positions.show(positionId) return ( <div className="px-6 py-4"> <div className="bg-gray-100 dark:bg-gray-800 p-4 rounded-md"> <div className="flex w-full gap-6 justify-between items-center"> <span className="p-4 "> <h3 className="text-xl font-semibold mb-2">{position?.title}</h3> <h4 className="text-md mb-2 "> {position?.type === "full-time" ? "Full-Time" : position?.type === "part-time" ? "Part-Time" : "Contract"} </h4> </span> <div className="flex flex-col flex-wrap gap-2 mb-4"> <span className="flex items | A shadcn/ui and v0 generation - v0