---
metaTitle: ContentPlaceholder component | AwesCode UI
meta:
  - name: description
    content: The <AwContentPlaceholder /> component is used to render loading placeholder content - UI Vue component for AwesCode UI.
title: ContentPlaceholder
---

# ContentPlaceholder

**Category:** Atom | **Import:** Global

The `AwContentPlaceholder` component displays animated placeholder content while data is loading.

## Overview

`AwContentPlaceholder` provides a skeleton loading state with animated shimmer effect. It's useful for displaying placeholder content while waiting for data to load, improving perceived performance and user experience. The component supports multiple types optimized for different content layouts.

## Usage

### Basic Example

```markup
<AwContentPlaceholder />
```

### Form Type

```markup
<AwContentPlaceholder type="form" :lines="4" />
```

### Text Type

```markup
<AwContentPlaceholder type="text" :lines="8" />
```

### Image Type

```markup
<AwContentPlaceholder type="image" />
```

### Avatar Type

```markup
<AwFlow :gap="2">
    <AwContentPlaceholder type="avatar" />
    <AwContentPlaceholder type="avatar" />
    <AwContentPlaceholder type="avatar" />
</AwFlow>
```

### Button Type

```markup
<AwGrid :gap="2">
    <AwContentPlaceholder type="button" :lines="2" />
    <AwContentPlaceholder type="button" :lines="1" />
</AwGrid>
```

### Multi-Column Layout

```markup
<AwContentPlaceholder type="form" :columns="2" :lines="4" />
```

```markup
<AwContentPlaceholder type="text" :columns="3" :lines="6" />
```

### Loading Simulation

```markup
<AwCard title="User Profile">
    <AwFlow v-if="!loading" :gap="2">
        <AwAvatar :src="data.avatar" :name="data.name" size="lg" />
        <AwFlow vertical :gap="1">
            <AwDescription tag="div" class="font-semibold">
                {{ data.name }}
            </AwDescription>
            <AwDescription tag="div" class="text-sm">
                {{ data.email }}
            </AwDescription>
        </AwFlow>
    </AwFlow>
    <AwFlow v-else :gap="2">
        <AwContentPlaceholder type="avatar" />
        <AwFlow vertical :gap="1" class="flex-1">
            <AwContentPlaceholder type="text" :lines="2" />
        </AwFlow>
    </AwFlow>
</AwCard>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| type | Placeholder type | `String` | `false` | `'form'` |
| lines | Number of placeholder lines | `Number` | `false` | `8` (text), `1` (others) |
| columns | Number of columns in grid layout | `Number` | `false` | `1` |

**Type Options:**
- `form` - Form field placeholders (default)
- `text` - Text content placeholders
- `image` - Image placeholders (always 1 line)
- `avatar` - Avatar placeholders (always 1 line, circular)
- `button` - Button placeholders (1-2 lines max)

**Lines Behavior:**
- `text` type: 1-20 lines
- `form` type: 1-20 lines
- `button` type: 1-2 lines (clamped)
- `image` type: Always 1 line (ignored)
- `avatar` type: Always 1 line (ignored)

**Columns:**
- Supports 1, 2, or 3 columns (clamped to valid range)

### Slots

No slots are available for this component.

### Events

No events are emitted by this component.

## Related Components

- `AwEmptyContainer` - Empty state container
- `AwProgress` - Progress indicator

## Notes

- **Import Method:** Global - Available as atom component
- Displays animated shimmer effect on placeholder lines
- Supports 1, 2, or 3 column grid layouts
- Image and avatar types always display as single items regardless of lines prop
- Button type supports maximum 2 lines
- Default animation appears after 600ms delay
- Use for skeleton loading states while data is being fetched
- Each type has optimized styling for its specific use case