<!-- source-hash: 1103dbd0890929bf5922563df098f12b -->
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<HTMLDivElement>`, 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 (
      <div className="flex flex-col gap-2">
        {Array.from({ length: 5 }).map((_, i) => (
          <TicketCardSkeleton key={i} />
        ))}
      </div>
    )
  }

  return tickets.map(ticket => <TicketCard key={ticket.id} {...ticket} />)
}

// With custom className
<TicketCardSkeleton className="opacity-50" />
```

> **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.