<!-- source-hash: 1028d9cb0f96281d45d967924264b1cc -->
A React component providing full-screen and compact loading states with customizable text and branded OpenFrame logo animation.

## Key Components

- **`PageLoader`** - Full viewport loading component with centered content and animated logo
- **`CompactPageLoader`** - Smaller version for use within containers or modals
- **`PageLoaderProps`** - TypeScript interface defining customization options including title, description, styling, and icon visibility

## Usage Example

```typescript
import { PageLoader, CompactPageLoader } from './components/ui/page-loader'

// Full page loading state
function App() {
  const [isLoading, setIsLoading] = useState(true)
  
  if (isLoading) {
    return (
      <PageLoader 
        title="Loading Dashboard"
        description="Fetching your data..."
        className="bg-gray-50"
      />
    )
  }
  
  return <Dashboard />
}

// Compact loader for components
function DataTable() {
  return (
    <div className="border rounded-lg">
      <CompactPageLoader 
        title="Loading table data"
        showIcon={false}
      />
    </div>
  )
}
```

Both components feature the OpenFrame logo with pulse animation, customizable text content, and responsive design using Tailwind CSS classes with the design system's color tokens.