> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# WallySkeleton

Use the same WallySkeleton while the host downloads the assistant remote, the remote checks access, and the runtime connects. Import it from `@wallarm-org/design-system/WallySkeleton` without loading WallyAssistant or its markdown renderer. Give the parent a height; the skeleton fills it. Placeholders and the decorative mesh are static, so remounting between loading stages preserves the image, including with reduced motion. The surface announces “Loading Wally”; override `aria-label` for localization. It has no interactive controls.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/WallySkeleton) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/ai-wallyskeleton--overview)

```tsx
import { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';

export const Default = () => (
  <div className='h-640 w-480 max-w-full'>
    <WallySkeleton data-testid='wally-loading' />
  </div>
);
```

## Usage

```tsx
import { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';
```

## Examples

### Narrow

```tsx
import { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';

export const Narrow = () => (
  <div className='h-640 w-320 max-w-full'>
    <WallySkeleton data-testid='wally-loading' />
  </div>
);
```

### Handoff

Continue loading remounts the skeleton, like replacing the host fallback with the remote’s own loading state. Its geometry, colors and background stay identical.

```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { WallySkeleton } from '@wallarm-org/design-system/WallySkeleton';

export const Handoff = () => {
  const [stage, setStage] = useState(0);

  return (
    <div className='flex flex-col gap-12'>
      <Button data-testid='next-stage' onClick={() => setStage(current => current + 1)}>
        Continue loading
      </Button>
      <div className='h-640 w-480 max-w-full'>
        <WallySkeleton key={stage} data-testid='wally-loading' />
      </div>
    </div>
  );
};
```

## Props

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |