# loading-states

Проектирует состояния ожидания: скелетоны, индикаторы, постепенную загрузку и оптимистичные обновления. Нужен, когда контент или действие не завершаются сразу.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2200 установок · ★ 3103
- Автор: Owl-Listener
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/Owl-Listener/designer-skills/tree/HEAD/interaction-design/skills/loading-states/SKILL.md
- Обновлён: 2026-09-05
- HTML: https://affpapa.org/nevibecode/skills/loading-states

## Что делает

Скилл помогает спроектировать экран загрузки без пустого состояния: подобрать скелетон для знакомой структуры, компактный спиннер при неизвестной длительности или шкалу прогресса, если ход работы измерим. Для изображений предлагает показывать низкое разрешение до полной версии.

Он также описывает постепенную подгрузку: сначала критичный контент, затем элементы ниже первого экрана. Для действий можно сразу показать ожидаемый результат, сверить его с ответом сервера и откатить при ошибке. Контент стоит проявлять плавно, не сдвигать макет и сохранять позицию прокрутки при обновлении.

При ожидании дольше 10s скилл советует подробный прогресс, оценку времени и фоновый вариант. Это повод проверить такие сценарии отдельно. Для анимации блика нужно учитывать reduced-motion, а длинные загрузки требуют кнопки отмены или возврата.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill loading-states -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/loading-states/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/loading-states/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill loading-states -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/loading-states/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill loading-states -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/loading-states/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Owl-Listener/designer-skills loading-states
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/loading-states/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill loading-states -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/Owl-Listener/designer-skills --path interaction-design/skills/loading-states
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/loading-states/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill loading-states -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/Owl-Listener/designer-skills/tree/HEAD/interaction-design/skills/loading-states/SKILL.md

## Когда брать
- показать скелетон до загрузки знакомого макета
- выбрать спиннер или измеримый прогресс
- подгрузить сначала критичный контент
- откатить оптимистичное обновление при ошибке
- сохранить прокрутку при обновлении контента

## Примеры запросов агенту
- «Спроектируй состояния загрузки для списка и не допускай сдвигов макета.»
- «Добавь оптимистичное обновление с откатом после ошибки сервера.»
- «Проверь экран ожидания для долгой операции и предложи прогресс с отменой.»

## Похожие
- [loading-states-and-perceived-performance](https://affpapa.org/nevibecode/skills/loading-states-and-perceived-performance.md) — скилл · 871 установка
- [beam-glow-states](https://affpapa.org/nevibecode/skills/beam-glow-states.md) — скилл · 1300 установок
- [button-states](https://affpapa.org/nevibecode/skills/button-states.md) — скилл · 877 установок
- [impeccable](https://affpapa.org/nevibecode/skills/impeccable.md) — скилл · 361300 установок
- [uizze-ui](https://affpapa.org/nevibecode/skills/uizze-ui.md) — скилл · 144000 установок
- [microinteractions](https://affpapa.org/nevibecode/skills/microinteractions.md) — скилл · 6700 установок

## Другие версии с тем же именем
- [loading-states · dylantarre](https://affpapa.org/nevibecode/skills/dylantarre-loading-states.md) — 562 установки

Из того же набора: [owl-listener/designer-skills](https://affpapa.org/nevibecode/by/owl-listener/designer-skills.md) — 109 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md