Loading state placeholder component that renders an animated skeleton UI mimicking the structure of a ticket card while content is being fetched. ## Key Components - **`TicketCardSkeleton`** — A `forwardRef` component that renders a structured skeleton layout matching the ticket card's visual hierarchy: - Title placeholder (3/4 width bar) - Subtitle row with icon and text placeholders - Action area with icon and avatar placeholders - Badge/tag row at the bottom - **`TicketCardSkeletonProps`** — Extends `React.HTMLAttributes`, accepting all standard div props plus an optional `className` for style overrides. ## Usage Example ```typescript import { TicketCardSkeleton } from '@/components/tickets/ticket-card-skeleton' // Basic loading state function TicketList({ isLoading, tickets }) { if (isLoading) { return (

{Array.from({ length: 5 }).map((_, i) => ( ))}

) } return tickets.map(ticket => ) } // With custom className ``` > **Note:** This component uses ODS design tokens (`--spacing-system-*`, `ods-border`, `ods-bg`) and the shared `Skeleton` primitive for consistent pulse animation across the Flamingo UI. Pair it directly with `TicketCard` to ensure visual dimensions match during loading transitions.