<!-- source-hash: 562bc3a2494ee1c2637528e67f5924fc -->
A React skeleton loading component that renders an animated placeholder UI for profile content while data is being fetched.

## Key Components

- **`ProfileLoadingSkeleton`** — Named export functional component that renders a two-section animated skeleton:
  - **Header skeleton** — Circular avatar placeholder (`h-16 w-16`) alongside two text line placeholders
  - **Content skeleton** — Three progressively narrower text line placeholders (`full`, `3/4`, `1/2` widths)

- **`ProfileLoadingSkeletonProps`** — Interface accepting an optional `className` string for layout customization

- **`cn`** utility — Merges Tailwind class names, allowing consumers to extend or override base styles

## Usage Example

```typescript
import { ProfileLoadingSkeleton } from './components/ProfileLoadingSkeleton'

// Basic usage
function ProfilePage() {
  const { data, isLoading } = useProfile()

  if (isLoading) {
    return <ProfileLoadingSkeleton />
  }

  return <ProfileCard data={data} />
}

// With custom className for layout overrides
function SidebarProfile() {
  return (
    <ProfileLoadingSkeleton className="max-w-sm px-4" />
  )
}
```

## Notes

- Uses the `ods-skeleton` design token (via `bg-ods-skeleton`) for consistent skeleton coloring across the OpenFrame Design System
- Animation is handled entirely via Tailwind's `animate-pulse` — no additional animation dependencies required
- The `className` prop is merged at the root `div`, making it straightforward to control width, padding, or margin from the parent

**Source:** [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ProfileLoadingSkeleton.tsx)