Дизайн состояний загрузки (Skeleton/Shimmer) мобильного приложения

Дизайн состояний загрузки (Skeleton/Shimmer) мобильного приложения

Спиннер на весь экран — решение из 2015 года. Пользователь видит пустоту и не понимает, что загружается: список из 3 элементов или из 300, маленький блок или целый экран. Skeleton-экраны решают это: пользователь видит структуру контента до его появления, воспринимаемая скорость загрузки растёт.

Как правильно строить skeleton

Skeleton — это не просто серые прямоугольники. Они должны точно повторять структуру реального контента: ширину, высоту, расположение элементов. Если карточка товара занимает 120pt высоты с фото 80×80, двумя строками текста и ценой — skeleton должен иметь такую же высоту и такое же расположение заглушек.

Типичная ошибка: skeleton-заглушка для текста шириной 100% контейнера. В реальности текст так не выглядит — он занимает 60–80% ширины в первой строке, 40–50% в последней. Неравномерные заглушки выглядят естественнее.

Размеры заглушек:

• Заголовок: высота 16–20pt, ширина 60–70% контейнера
• Основной текст, строка: высота 12–14pt, ширина 85–95% (первая строка), 50–60% (последняя)
• Аватар: круглая заглушка, точный размер аватара
• Изображение: прямоугольник с точным соотношением сторон оригинала

Shimmer-анимация

Shimmer — это градиент, который движется слева направо поверх skeleton-блоков, имитируя «отблеск». Реализуется через:

• iOS: CAGradientLayer с анимацией CABasicAnimation на position.x, или готовая библиотека SkeletonView
• Android: через Shimmer от Facebook (fblibrary) или нативный PlaceholderHighlight в Compose с Modifier.placeholder
• React Native: react-native-skeleton-placeholder или кастомная Animated.Value
• Flutter: пакет shimmer от pub.dev

Цвета shimmer: base color примерно #E0E0E0 (light mode), highlight #F5F5F5. В dark mode — #2A2A2A base, #3A3A3A highlight. Скорость анимации: 1–1.5 секунды на полный цикл.

Сколько skeleton-экранов показывать

Ошибка: показывать только один скелетон для первой строки, а остальное — пустое место. Правильно: показывать 3–5 заглушек карточек, имитируя первый видимый экран. Пользователь не должен видеть, что список заканчивается — пока данные не загрузились.

Переход от skeleton к реальному контенту: fade-in анимация 200–300ms. Без анимации переход резкий, со слишком долгой анимацией — раздражает.

Что делать при частичной загрузке

Данные приходят не всегда одним блоком. Например: текст поста загрузился, изображение ещё нет. В таком случае skeleton остаётся только для изображения — текст уже показываем. Это требует отдельного компонента ImagePlaceholder с shimmer, который живёт независимо от текста.

Срок — 1 день на полный набор skeleton-состояний для всех ключевых экранов. Стоимость рассчитывается индивидуально.