<!-- source-hash: 1652a2fc27882d2f080c7367aefb18e6 -->
A React loading skeleton component that displays animated placeholder elements while profile data is being fetched, providing visual feedback during loading states.

## Key Components

**ProfileLoadingSkeleton**
- Main component that renders skeleton placeholders
- Takes optional `className` prop for styling customization
- Creates animated placeholder elements mimicking profile layout

**Props Interface**
- `ProfileLoadingSkeletonProps` - Defines optional className string prop

## Usage Example

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

function ProfilePage() {
  const { data: profile, isLoading } = useProfile()
  
  if (isLoading) {
    return (
      <div className="container mx-auto p-4">
        <ProfileLoadingSkeleton className="max-w-md" />
      </div>
    )
  }
  
  return <ProfileDisplay profile={profile} />
}

// Custom styling example
function CustomProfileSkeleton() {
  return (
    <ProfileLoadingSkeleton 
      className="bg-white rounded-lg p-6 shadow-sm" 
    />
  )
}
```

The component features a header section with circular avatar placeholder and text lines, followed by content area with varying width placeholder lines. All elements use `animate-pulse` for smooth loading animations and `bg-gray-200` for consistent skeleton styling.