Full-page and compact loading state components that display an animated OpenFrame logo with customizable title and description text. ## Key Components | Export | Type | Description | |---|---|---| | `PageLoader` | Component | Full viewport loading overlay with centered content | | `CompactPageLoader` | Component | Smaller loading indicator for inline containers | | `PageLoaderProps` | Interface | Shared props interface for both components | ### `PageLoaderProps` | Prop | Type | Default | Description | |---|---|---|---| | `title` | `string` | `'Loading'` | Primary loading message | | `description` | `string` | `'Getting your data ready'` | Secondary descriptive text | | `className` | `string` | — | Additional CSS classes for the container | | `showIcon` | `boolean` | `true` | Toggles the animated OpenFrame logo | ## Usage Example ```typescript import { PageLoader, CompactPageLoader } from '@openframe-oss-lib/ui' // Full-screen loader during initial data fetch function App() { if (isLoading) { return ( ) } return } // Compact loader inside a panel or widget function DataPanel() { return ( ) } // Icon-free loader with custom styling ``` **Key differences:** `PageLoader` uses `min-h-screen` to fill the viewport and always shows `description`; `CompactPageLoader` uses `p-12` padding and renders `description` only when provided. ## Source [`page-loader.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/page-loader.tsx)