Skeleton

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

Основные свойства компонента Skeleton

  1. loading Тип: boolean По умолчанию: true Определяет, показывать ли скелетон или настоящий контент. Когда loading установлен в false, отображается дочерний контент компонента.

    <Skeleton loading={true}>
  <p>Контент загружен</p>
</Skeleton>

  2. active Тип: boolean По умолчанию: false Включает анимацию мерцания скелетона, создавая ощущение «живого» процесса загрузки.

    <Skeleton active />

  3. avatar Тип: boolean | object Определяет, отображать ли аватар. Если передать объект, можно настроить его размеры и форму:

    <Skeleton avatar={{ size: 64, shape: 'circle' }} active />

  4. title Тип: boolean | object Контролирует отображение заголовка. Можно задать ширину:

    <Skeleton title={{ width: '60%' }} active />

  5. paragraph Тип: boolean | object Управляет отображением абзаца текста. Объект позволяет задавать количество строк и их ширину:

    <Skeleton paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }} active />

Использование Skeleton для различных элементов

Скелетон карточки (Card)

Компонент Skeleton удобно использовать для предварительной загрузки карточек:

import { Skeleton, Card } from 'antd';

<Skeleton loading={true} avatar active>
  <Card title="Заголовок карточки">
    <p>Содержимое карточки</p>
  </Card>
</Skeleton>

Здесь avatar добавляет круглую область слева, имитирующую изображение, а active делает скелетон анимированным.

Скелетон списка (List)

Для списков и таблиц Skeleton используется для создания повторяющихся элементов-заглушек:

import { Skeleton, List } from 'antd';

<Skeleton loading={true} active>
  <List
    dataSource={[1, 2, 3]}
    renderItem={item => <List.Item>Элемент {item}</List.Item>}
  />
</Skeleton>

Скелетон таблицы (Table)

При работе с таблицами Skeleton может комбинироваться с компонентом Table, чтобы показать скелетон строк до загрузки данных:

import { Skeleton, Table } from 'antd';

<Skeleton loading={true} active>
  <Table columns={[{ title: 'Имя', dataIndex: 'name' }]} dataSource={[]} />
</Skeleton>

Настройка внешнего вида Skeleton

  • Размеры элементов Свойства avatar, title и paragraph позволяют гибко настраивать размеры и форму элементов.

  • Анимация active добавляет мерцающую анимацию, которая делает интерфейс более динамичным.

  • Стилизация через CSS Skeleton можно обернуть в контейнер с кастомными стилями, чтобы адаптировать к дизайну приложения:

<Skeleton style={{ padding: 24, borderRadius: 8 }} active />
  • Комбинирование с другими компонентами Skeleton можно использовать внутри Card, List, Table, а также с кастомными компонентами, чтобы визуально показывать состояние загрузки любых элементов интерфейса.

Особенности и рекомендации

  • Оптимизация UX: Skeleton уменьшает ощущение задержки при загрузке данных и повышает восприятие скорости приложения.
  • Не перегружать деталями: Скелетон должен имитировать структуру контента, но не нужно повторять все детали.
  • Адаптивность: Использовать свойства width и rows для адаптации скелетона под разные размеры экранов.
  • Совместимость с темами: Skeleton автоматически подстраивается под светлую и темную темы Ant Design.

Пример комплексного использования Skeleton

import { Skeleton, Card, List } from 'antd';

const data = [
  { title: 'Элемент 1', description: 'Описание 1' },
  { title: 'Элемент 2', description: 'Описание 2' },
];

function App({ loading }) {
  return (
    <List
      grid={{ gutter: 16, column: 2 }}
      dataSource={data}
      renderItem={item => (
        <List.Item>
          <Skeleton loading={loading} avatar active>
            <Card title={item.title}>{item.description}</Card>
          </Skeleton>
        </List.Item>
      )}
    />
  );
}

В этом примере одновременно используется List, Card и Skeleton, что демонстрирует гибкость компонента для сложных интерфейсов с динамическими данными.

Skeleton в Ant Design — мощный инструмент для улучшения восприятия интерфейса, обеспечивающий плавный пользовательский опыт при асинхронной загрузке данных.

Оглавление