Skeleton loading — показ структуры страницы во время загрузки. Лучше spinner. Facebook, LinkedIn, YouTube используют.
Skeleton vs Spinner
Spinner: \"загрузка\". Skeleton: \"вот как будет выглядеть\". -30% frustration.
Как работает
Gray блоки в форме контента. Shimmer animation. Fade при загрузке real контента.
Дизайн
Gray #e0e0e0, border-radius 4-8px. Форма контента.
CSS
linear-gradient, animation shimmer 1.5s.
Виды
Card, list, article, avatar, button skeleton.
Когда использовать
Initial load, list update, lazy load, AJAX.
Когда не
Меньше 500ms. Простой form submit. Error.
Perceived vs real
Real time не меняется. Perceived -30-40%.
Animation
1-2 секунды цикл. 1.5s стандарт.
Skeleton vs Optimistic UI
Skeleton loading. Optimistic — instant action result.
Tools
react-loading-skeleton, vue-content-loader. Pure CSS.
Mobile
Особенно важна. requestAnimationFrame.
A/B test
Skeleton -10-20% bounce vs spinner.
Ошибки
Форма не похожа. Слишком долго. Jerky animation.
Accessibility
aria-hidden, aria-live=\"polite\".
Сайт.uz
Skeleton в блоге, продуктах, search. 1.5s shimmer. Mobile bounce -6% (18%→12%).