Loading state skeleton component for a file manager UI, rendering placeholder shimmer elements that mirror the layout of breadcrumbs, search bar, table headers, and file rows.
## Key Components
### `FileManagerSkeleton`
Main exported component that composes multiple `Skeleton` primitives into a full file manager loading state.
**Props (`FileManagerSkeletonProps`):**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `rows` | `number` | `8` | Number of placeholder file rows to render |
| `showSearch` | `boolean` | `true` | Toggles the search bar skeleton |
| `showActions` | `boolean` | `true` | Toggles the action buttons skeleton in the toolbar |
**Rendered regions:**
- **Breadcrumb bar** — three path segment skeletons with separator dots
- **Action buttons** — four button-sized skeletons (conditionally rendered)
- **Search bar** — full-width rounded input skeleton (conditionally rendered)
- **Table header** — checkbox, NAME, SIZE, and EDITED column labels
- **Table rows** — `rows` × row with checkbox, file icon, name, size, modified date, and two icon-button skeletons
## Usage Example
```typescript
import { FileManagerSkeleton } from '@/components/file-manager-skeleton'
// Default: 8 rows, search and actions visible
// Minimal: 5 rows, no search bar, no action buttons
// Typically used inside a Suspense boundary or conditional render
function FileManagerPage() {
return isLoading
?
:
}
```
## Source
[`file-manager-skeleton.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/file-manager-skeleton.tsx)