<!-- source-hash: b81e47a927a9ff4d5803ff0d1171b304 -->
A skeleton loading component that displays a placeholder table structure while user data is being fetched, providing visual feedback during loading states.

## Key Components

- **`UsersGridSkeleton`** - Main skeleton component that renders an animated placeholder table
- **`Props`** interface defining:
  - `rows` - Number of skeleton rows to display (defaults to 10)
  - `className` - Optional additional CSS classes for styling

## Features

- **Responsive Design**: Horizontal scroll for mobile compatibility with `overflow-x-auto`
- **Pulse Animation**: Built-in `animate-pulse` class for loading feedback
- **Fixed Structure**: Matches actual users grid with 5 columns (Name, Email, Role, Created, Last Sign-In)
- **Customizable Rows**: Configurable number of skeleton rows based on expected data size
- **Theme Integration**: Uses ODS (design system) color tokens and styling

## Usage Example

```typescript
import { UsersGridSkeleton } from './users-grid-skeleton'

// Basic usage with default 10 rows
function UsersList() {
  const [loading, setLoading] = useState(true)
  const [users, setUsers] = useState([])

  if (loading) {
    return <UsersGridSkeleton />
  }

  return <UsersGrid users={users} />
}

// Custom row count and styling
function AdminPanel() {
  return (
    <UsersGridSkeleton 
      rows={5}
      className="shadow-lg"
    />
  )
}
```