# ShimmerEffect

Source: https://payloadcms.com/docs/beta/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

Inside a Payload Admin Panel Custom Component:

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

You can also import the component directly:

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

## Basic usage

**Implementation**

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

**Styling**

Override ShimmerEffect tokens on the component to match a custom surface without changing global background colors.

```css
@layer payload {
  .shimmer-effect {
    --shine-bg: #ebe9f5;
    --shine-fg: #f8f7fc;
    --radius-medium: 0.5rem;
  }
}
```

- `--shine-bg`: Base placeholder color.
- `--shine-fg`: Animated highlight color.
- `--radius-medium`: Default placeholder 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 ShimmerEffect tokens on the component to match a custom surface without changing global background colors.

```css
@layer payload {
  .shimmer-effect {
    --shine-bg: #ebe9f5;
    --shine-fg: #f8f7fc;
    --radius-medium: 0.5rem;
  }
}
```

- `--shine-bg`: Base placeholder color.
- `--shine-fg`: Animated highlight color.
- `--radius-medium`: Default placeholder corner radius.

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

## Accessibility

- Keep the loading announcement outside the decorative shimmer element.
- Avoid changing the placeholder dimensions when the final content loads.
- Respect the surrounding interface's reduced-motion behavior.

## 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.  |