Skeleton

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

Основное использование

Самый простой способ использования Skeleton — это создание базового блока-заполнителя:

import { Skeleton } from "@chakra-ui/react";

<Skeleton height="20px" width="200px" />

Здесь height и width задают размеры скелетона, имитируя будущий контент. Этот подход подходит для текстовых элементов, кнопок и блоков интерфейса.

Skeleton с анимацией

По умолчанию Skeleton в Chakra UI поддерживает анимацию “pulsing”, создающую эффект мерцания:

<Skeleton height="20px" width="200px" speed={1.5} />
  • speed — регулирует скорость анимации (по умолчанию 0.8s).
  • startColor и endColor — позволяют задать градиент скелетона, создавая эффект плавного перехода между цветами:
<Skeleton
  height="20px"
  width="200px"
  startColor="gray.200"
  endColor="gray.400"
/>

Skeleton для текста

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

import { SkeletonText } from "@chakra-ui/react";

<SkeletonText mt="4" noOfLines={3} spacing="4" />
  • noOfLines — количество линий текста.
  • spacing — расстояние между линиями.
  • mt — внешнее поле сверху, используется для позиционирования.

SkeletonText хорошо подходит для блоков новостей, описаний, параграфов или постов.

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

Для аватаров, иконок или любых круглых элементов применяется SkeletonCircle:

import { SkeletonCircle } from "@chakra-ui/react";

<SkeletonCircle size="12" />
  • size — диаметр круга.
  • Можно комбинировать с другими свойствами, как в обычном Skeleton: startColor, endColor, speed.

Управление видимостью

Skeleton может быть условно показан в зависимости от состояния загрузки данных с помощью свойства isLoaded:

<Skeleton isLoaded={dataLoaded}>
  <Box height="20px" width="200px">
    {data}
  </Box>
</Skeleton>

  • isLoaded принимает boolean:

    • false — показывается Skeleton.
    • true — отображается настоящий контент.

Это позволяет использовать Skeleton как обертку вокруг любого компонента, управляя визуализацией загрузки.

Комбинирование с другими компонентами

Skeleton легко интегрируется с Layout-компонентами Chakra UI, такими как Box, Flex, Stack. Например, создание списка карточек с Skeleton:

<Stack spacing="4">
  {[...Array(3)].map((_, index) => (
    <Skeleton key={index} height="100px" borderRadius="md" />
  ))}
</Stack>
  • Использование Stack обеспечивает равномерные отступы между Skeleton.
  • borderRadius делает блоки скелетона более реалистичными, имитируя готовый UI.

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

Skeleton поддерживает стандартные свойства Chakra UI для стилизации:

  • borderRadius — скругление углов.
  • margin, padding, width, height — стандартные размеры и отступы.
  • backgroundColor через startColor и endColor для плавного градиента.

Пример стилизованного скелетона:

<Skeleton
  height="50px"
  width="50%"
  borderRadius="lg"
  startColor="pink.100"
  endColor="pink.300"
/>

Практическое использование

Skeleton часто применяется для:

  • Загрузки списка элементов (посты, товары, карточки профиля).
  • Загрузки изображений или аватаров.
  • Имитации текста и кнопок до получения данных с сервера.
  • Создания визуально приятного UX, чтобы пользователь видел прогресс загрузки.

Skeleton в Chakra UI обеспечивает простую и гибкую реализацию визуальных индикаторов загрузки, поддерживает адаптивный дизайн и легко комбинируется с любыми компонентами интерфейса, что делает его незаменимым инструментом при создании динамичных React-приложений.

Оглавление