<!-- source-hash: d3a9248386a37f94266fe130168f8cb2 -->
A client-side React component that provides a skeleton loading state for detail pages, simulating the layout of content-heavy pages like product details, case studies, or articles.

## Key Components

- **DetailPageSkeleton** - Main skeleton component with configurable metadata columns and image gallery
- **DetailPageSkeletonProps** - Interface defining optional configuration props
  - `metadataColumns` - Number of metadata grid columns (default: 4)
  - `showImageGallery` - Toggle for horizontal image gallery vs featured image (default: true)

The component renders animated placeholder blocks for:
- Title section
- Category tags
- Configurable metadata grid
- Image gallery or featured image
- Multiple content sections with headings and paragraphs

## Usage Example

```typescript
import { DetailPageSkeleton } from './detail-page-skeleton';

// Default configuration (4 columns, with image gallery)
function ProductPage() {
  return (
    <div>
      {loading ? (
        <DetailPageSkeleton />
      ) : (
        <ProductDetails data={product} />
      )}
    </div>
  );
}

// Custom configuration for case study pages
function CaseStudyPage() {
  return (
    <div>
      {loading ? (
        <DetailPageSkeleton 
          metadataColumns={3}
          showImageGallery={false} // Shows featured image instead
        />
      ) : (
        <CaseStudyContent data={caseStudy} />
      )}
    </div>
  );
}
```