AiShimmer

AiShimmer — декоративный shimmer-лоадер из набора AI Components. Брендовая волна обрезается по форме текста через background-clip: text; ширина контейнера и размер шрифта задают layout автоматически.

Демо

<AiShimmer data-test-id="ai-shimmer" iconSize={16} size="m" variant="body" weight="regular" text="Officia cillum labore enim eiusmod exercitation ullamco occaecat utminim consequat labore occaecat est." />

Когда использовать

• При загрузке AI-ответа, где нужен акцентный движущийся shimmer по тексту.
• В placeholder-сценариях, когда обычного Skeleton визуально недостаточно.

Когда не нужен

• Для нейтральной индикации загрузки без текста — используйте @cloud-ru/ds-skeleton.
• Для спиннера поверх модального окна — используйте @cloud-ru/ds-loader.

Анатомия

Animation

Волна повторяет спецификацию из Figma: сине-зелёная полоса шириной в две ширины строки идёт слева направо за 3 секунды, затем держит паузу 2 секунды. Цикл — 5 секунд, движение линейное и бесконечное.

Технически это градиентный слой поверх приглушённой базы, обрезанный по контуру текста через background-clip: text. Путь волны задан в пикселях строки через общую переменную --ai-shimmer-x, а не в процентах: процент считался бы от собственного бокса каждого слоя, и волна на иконке разошлась бы с волной на тексте. Ширина строки замеряется через ResizeObserver и document.fonts.ready.

При prefers-reduced-motion: reduce движение снимается и остаётся ровная заливка базовым цветом.

Text

Текст shimmer задаётся через проп text. Переносы строк поддерживаются символом \n. Многострочный текст автоматически переносится по ширине контейнера.

Icon

Ведущая иконка перед текстом заливается той же волной, что и текст, поэтому полоса проходит сплошняком от иконки до конца строки. Размер задаётся пропом iconSize, по умолчанию 16 пикселей. Иконку можно передать двумя способами:

• icon — узел любого компонента, который рендерит <svg>: иконка из @cloud-ru/ds-icons, AiIconGiga, Sun из @cloud-ru/ds-loader. Узел становится маской волны, как слои iconMask и icon (color) в Figma; его собственные цвета не важны, а анимация внутри иконки сохраняется. Размер узла должен совпадать с iconSize.
• iconMask — готовый силуэт как CSS mask-image, обычно url("data:image/svg+xml,…"). Силуэт логотипа GigaChat экспортирует @cloud-ru/ds-ai-icon-giga под именем GIGA_MASK_IMAGE. Используется, когда icon не передан.

Slot after

Проп slotAfter добавляет хвостовой узел справа от текста — например счётчик или длительность. Волна проходит по нему той же полосой, что по тексту: координата волны общая для всей строки. База слота на тон светлее текста, как второстепенная информация в дизайн-системе. Собственный цвет слоту задавать не нужно: он должен остаться прозрачным, иначе перекроет и базу, и волну.

Typography

Типографика задаётся пропами variant, size и weight — те же значения, что и в @cloud-ru/ds-typography. По умолчанию body / m / regular. Константы VARIANT, SIZE, WEIGHT и дефолты экспортируются из пакета.

import { AiShimmer, DEFAULT_SIZE, DEFAULT_VARIANT, DEFAULT_WEIGHT } from '@cloud-ru/ds-ai-shimmer'

<AiShimmer
  text='Generating...'
  variant={DEFAULT_VARIANT}
  size={DEFAULT_SIZE}
  weight={DEFAULT_WEIGHT}
/>

Установка

pnpm add @cloud-ru/ds-ai-shimmer

import { AiShimmer, DEFAULT_SIZE } from '@cloud-ru/ds-ai-shimmer'

Примеры использования

Базовый

import { AiShimmer } from '@cloud-ru/ds-ai-shimmer';

export function Basic() {
  return <AiShimmer text='Generating AI response...' />;
}

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

import { AiShimmer } from '@cloud-ru/ds-ai-shimmer';

export function Multiline() {
  return <AiShimmer text={'Generating AI response for your request...\nPlease wait a few seconds.'} />;
}

Размер шрифта

import { AiShimmer, SIZE } from '@cloud-ru/ds-ai-shimmer';

export function CustomSize() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <AiShimmer text='Size S (body regular)' size={SIZE.s} />
      <AiShimmer text='Size M (body regular)' size={SIZE.m} />
      <AiShimmer text='Size L (body regular)' size={SIZE.l} />
    </div>
  );
}

Props

Types

AiShimmerProps

Unions

AiShimmerSize

AiShimmerVariant

AiShimmerWeight

Storybook

Figma