# ShimmerEffect

Source: https://payloadcms.com/docs/ui-components/shimmer-effect

The `ShimmerEffect` component provides a visual placeholder while content is loading. Match its dimensions to the content that will replace it to reduce layout shift.

## Import

```tsx
import { ShimmerEffect } from '@payloadcms/ui'
```

## Basic usage

**Implementation**

```tsx
<ShimmerEffect height={60} width="100%" />
```

**Styling**

Override the ShimmerEffect variables to match a branded loading surface without changing the animation implementation.

```css
.shimmer-effect {
  --shine-bg: #ebe7ff;
  --shine-fg: #b8adff;
  border-radius: 6px;
}
```

- `--shine-bg`: Resting skeleton background.
- `--shine-fg`: Animated highlight color.
- `border-radius`: Skeleton corner radius.

## Composing a skeleton

Combine multiple shimmer elements to approximate the final layout.

**Implementation**

```tsx
<ShimmerEffect height={48} style={{ borderRadius: '50%' }} width={48} />
<ShimmerEffect height={16} width="75%" />
<ShimmerEffect height={16} width="50%" />
```

**Styling**

Override the ShimmerEffect variables to match a branded loading surface without changing the animation implementation.

```css
.shimmer-effect {
  --shine-bg: #ebe7ff;
  --shine-fg: #b8adff;
  border-radius: 6px;
}
```

- `--shine-bg`: Resting skeleton background.
- `--shine-fg`: Animated highlight color.
- `border-radius`: Skeleton corner radius.

Loading indicators should not replace an accessible loading label or status when users need to know that work is in progress.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop                  | Type               | Default  | Description                                         |
| --------------------- | ------------------ | -------- | --------------------------------------------------- |
| `height`              | `number \| string` | `'60px'` | Sets the placeholder height.                        |
| `width`               | `number \| string` | `'100%'` | Sets the placeholder width.                         |
| `animationDelay`      | `string`           | `'0ms'`  | Delays the shimmer animation.                       |
| `transparent`         | `boolean`          | `false`  | Allows the underlying background to remain visible. |
| `disableInlineStyles` | `boolean`          | `false`  | Leaves dimensions to a custom class or stylesheet.  |