Проектування стану завантаження веб-додатку (Skeleton/Shimmer)
Спінер — найпростіший спосіб показати завантаження, але далеко не найкращий. Коли користувач бачить крутящееся коло, він не розуміє, що саме завантажується і як довго чекати. Skeleton-екрани вирішують цю проблему: користувач бачить структуру сторінки до приходу даних.
Skeleton vs Spinner: коли що застосовувати
Обидва інструменти потрібні, але для різних ситуацій:
| Ситуація | Рішення |
|---|---|
| Завантаження всієї сторінки або великого блоку | Skeleton |
| Очікування дії (збереження форми, відправлення) | Spinner всередині кнопки |
| Фонова операція без блокування UI | Progress bar або нічого |
| Завантаження наступної порції в infinite scroll | Skeleton-карточки внизу |
| Підтвердження операції (delete, approve) | Spinner + вимкнута кнопка |
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-компонент з пропсом isLoading: boolean.
Відповідність skeleton реальному контенту
Точність skeleton важлива. Якщо skeleton показує три рядки тексту, а реальний заголовок — один рядок, при переході відбувається різкий стрибок — layout shift. Це погіршує CLS (Cumulative Layout Shift) і суб'єктивне сприйняття швидкості.
Для кожного блоку контенту проектуємо skeleton з дотриманням висоти:
- Карточка товару: фото-placeholder такої ж висоти, як img; три рядки тексту потрібної висоти; кнопка
- Рядок таблиці: точна кількість комірок, правильна висота рядка
- Пост у стрічці: аватар-коло, два рядки заголовка, три рядки тексту
Терміни
Проектування skeleton-системи для типового веб-додатку (10–20 компонентів) — 2–4 дні: інвентаризація завантажуваних блоків, розробка базового skeleton-компонента з анімацією, створення варіантів для всіх блоків, адаптація dark mode.