Skeleton для загрузки контента

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

Импорт и базовое использование

Для использования Skeleton необходимо импортировать компонент из MUI:

import Skeleton from '@mui/material/Skeleton';

Базовое применение выглядит следующим образом:

<Skeleton variant="text" width={210} />
<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="rectangular" width={210} height={118} />

Основные параметры:

  • variant — определяет форму скелета:

    • text — имитация текста;
    • circular — круглый индикатор (например, для аватаров);
    • rectangular — прямоугольный блок (карточки, изображения).

  • width и height — размеры скелета. Могут быть указаны в пикселях или процентах.

  • animation — анимация появления скелета:

    • pulse — плавное мерцание (по умолчанию);
    • wave — волнообразная анимация;
    • false — без анимации.

Skeleton для текста

Для отображения текста можно использовать вариант text:

<Skeleton variant="text" width="80%" />
<Skeleton variant="text" width="60%" />
<Skeleton variant="text" width="40%" />

Использование разных ширин имитирует многострочный текст и создает ощущение реального контента. Для имитации заголовков удобно применять большие размеры:

<Skeleton variant="text" width={300} height={40} />

Skeleton для изображений и карточек

Для изображений или карточек применяют rectangular:

<Skeleton variant="rectangular" width={300} height={200} />

Для списков карточек удобно использовать Stack или Grid:

import Grid from '@mui/material/Grid';
import Skeleton from '@mui/material/Skeleton';

<Grid container spacing={2}>
  {[1, 2, 3, 4].map((item) => (
    <Grid item key={item} xs={12} sm={6} md={3}>
      <Skeleton variant="rectangular" height={150} />
      <Skeleton variant="text" width="80%" />
      <Skeleton variant="text" width="60%" />
    </Grid>
  ))}
</Grid>

Такой подход имитирует полноценные карточки контента с изображением и текстом, создавая единый визуальный стиль загрузки.

Skeleton для аватаров и круглых элементов

Для аватаров и иконок применяется circular:

<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="circular" width={60} height={60} />

Для списка пользователей с аватарками и именами удобно комбинировать разные варианты:

<Grid container spacing={2} alignItems="center">
  {[1, 2, 3].map((item) => (
    <Grid item key={item} xs={12} display="flex" alignItems="center" gap={1}>
      <Skeleton variant="circular" width={40} height={40} />
      <Skeleton variant="text" width={120} />
    </Grid>
  ))}
</Grid>

Анимации Skeleton

Skeleton поддерживает три типа анимации, которые задаются через проп animation:

  • pulse — мерцающая анимация, создающая эффект «дыхания»;
  • wave — анимация волны, плавно проходящей слева направо;
  • false — статический индикатор без анимации.

Пример с волной:

<Skeleton variant="rectangular" width={300} height={200} animation="wave" />

Skeleton с условным рендерингом

Часто Skeleton используют совместно с данными, загружаемыми из API:

const [data, setData] = React.useState(null);

React.useEffect(() => {
  fetch('/api/items')
    .then((res) => res.json())
    .then((result) => setData(result));
}, []);

return (
  <div>
    {data
      ? data.map((item) => <div key={item.id}>{item.name}</div>)
      : <Skeleton variant="text" width={210} />}
  </div>
);

Этот подход позволяет отображать индикатор загрузки до появления реальных данных, предотвращая пустые места на странице.

Настройка стилей Skeleton

Скелеты можно стилизовать с помощью sx или классов MUI:

<Skeleton
  variant="rectangular"
  width={300}
  height={200}
  sx={{
    bgcolor: 'grey.300',
    borderRadius: 2
  }}
/>
  • bgcolor — задает цвет фона;
  • borderRadius — скругление углов, полезно для карточек с мягкими краями;
  • margin и padding — позволяют управлять расположением скелета на странице.

Многострочные скелеты

Для имитации параграфов удобно использовать несколько элементов text с разной шириной:

<Box>
  <Skeleton variant="text" width="90%" />
  <Skeleton variant="text" width="80%" />
  <Skeleton variant="text" width="95%" />
  <Skeleton variant="text" width="70%" />
</Box>

Такой подход позволяет визуально создать эффект нескольких строк текста, как если бы контент уже был загружен.

Skeleton в MUI — это мощный инструмент для улучшения UX, позволяющий создавать предсказуемый и плавный пользовательский интерфейс, имитируя загрузку контента, карточек, аватаров и текста с различной анимацией и стилями.

Оглавление