Дизайн состояний загрузки (Skeleton/Shimmer) веб-приложения
Spinner — самый простой способ показать загрузку, но далеко не лучший. Когда пользователь видит вращающийся кружок, он не понимает, что именно загружается и сколько ждать. Skeleton-экраны (скелетная загрузка) решают эту проблему: пользователь видит структуру страницы до того, как пришли данные.
Skeleton vs Spinner: когда что применять
Оба инструмента нужны, но для разных ситуаций:
| Ситуация | Решение |
|---|---|
| Загрузка всей страницы или крупного блока | Skeleton |
| Ожидание действия (сохранение формы, отправка) | Spinner внутри кнопки |
| Фоновая операция без блокировки UI | Progress bar или none |
| Загрузка следующей порции в infinite scroll | Skeleton-карточки внизу |
| Подтверждение операции (delete, approve) | Spinner + disable кнопки |
Skeleton уместен, когда загрузка занимает более 300ms и структура контента известна заранее.
Анатомия skeleton-компонента
Skeleton — это серые прямоугольники и окружности, повторяющие форму реального контента:
- Прямоугольники разной ширины — для строк текста (100%, 80%, 60% ширины)
- Квадраты или прямоугольники с border-radius — для изображений
- Окружности — для аватаров
- Прямоугольники нужного размера — для кнопок и бейджей
Цвет: нейтральный серый. В Light Mode — #E5E7EB (gray-200 в Tailwind), в Dark Mode — #374151 (gray-700). Shimmer-анимация добавляет движущийся градиент поверх: от rgba(255,255,255,0) через rgba(255,255,255,0.4) обратно к прозрачному, с animation-duration ~1.5s и linear timing.
Глубже: проектирование shimmer-анимации
Shimmer (мерцание) делается через CSS @keyframes + background-size + animation. Пример реализации на CSS-переменных:
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
var(--skeleton-base) 25%,
var(--skeleton-shine) 50%,
var(--skeleton-base) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite linear;
}
Ключевой момент дизайна: все skeleton-элементы на одном экране должны быть синхронизированы — одна анимация движется «слева направо» одновременно через все блоки. Это достигается через единый animation-delay: 0 на всех элементах или через CSS Custom Properties на родительском контейнере.
В Figma skeleton-компонент строится с помощью Variants: State=Loading (серые блоки) и State=Loaded (реальный контент). При передаче разработчикам — это один React-компонент с prop isLoading: boolean.
Соответствие skeleton реальному контенту
Точность skeleton важна. Если skeleton показывает три строки текста, а реальный заголовок — одна строка, при переходе происходит резкий прыжок — layout shift. Это ухудшает CLS (Cumulative Layout Shift) и субъективное восприятие скорости.
Для каждого блока контента проектируем skeleton с соблюдением высоты:
- Карточка товара: фото-placeholder такой же высоты, как img; три строки текста нужной высоты; кнопка
- Строка таблицы: точное количество ячеек, правильная высота строки
- Пост в ленте: аватар-круг, две строки заголовка, три строки текста
Сроки
Дизайн skeleton-системы для типового веб-приложения (10–20 компонентов) — 2–4 дня: инвентаризация загружаемых блоков, разработка базового skeleton-компонента с анимацией, создание вариантов для всех блоков, dark mode адаптация.