Что такое skeleton и зачем он нужен?

Skeleton (скелетон) — это UI-паттерн, при котором во время загрузки данных вместо реального контента отображаются серые блоки, повторяющие его структуру. Он помогает пользователю заранее понять, что появится на экране, и снижает когнитивную нагрузку от ожидания.

Зачем нужен skeleton

• Улучшает воспринимаемую производительность: интерфейс кажется быстрее, чем со спиннером.
• Предотвращает layout shift: место под контент уже зарезервировано.
• Даёт ощущение прогресса и предсказуемости.
• Снижает вероятность, что пользователь уйдёт со страницы.

Пример на React

function UserCard({ user, loading }) {
  if (loading) {
    return (
      <div className="card skeleton">
        <div className="avatar skeleton-block" />
        <div className="line skeleton-block" />
        <div className="line short skeleton-block" />
      </div>
    );
  }
  return (
    <div className="card">
      <img src={user.avatar} alt="" />
      <p>{user.name}</p>
      <p>{user.bio}</p>
    </div>
  );
}

Когда применять

Skeleton стоит использовать для контента с известной структурой: списки, карточки, профили, таблицы. Для коротких операций (например, отправка формы) лучше подойдёт спиннер или disabled-состояние кнопки.

Итог: skeleton — это простой способ сделать загрузку визуально комфортной и сохранить стабильность layout, поэтому его часто применяют в современных SPA и мобильных приложениях.