Chat Loader

Анимированный shimmer-текст для inline loading-состояний.

Думаю…Ищу в интернете

Составляю развёрнутый план по нескольким подзадачам…

import { ChatLoader } from "@/components/ui/chat-loader";

export default function Particle() {
  return (
    <div className="flex w-full flex-col items-start gap-4 p-4">
      <ChatLoader>Думаю…</ChatLoader>
      <ChatLoader duration={1.4}>Ищу в интернете</ChatLoader>
      <ChatLoader as="p" duration={3} spread={3}>
        Составляю развёрнутый план по нескольким подзадачам…
      </ChatLoader>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-loader

Использует framer-motion (уже в зависимостях Oracul).

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

import { ChatLoader } from "@/components/ui/chat-loader";
 
<ChatLoader>Thinking…</ChatLoader>
 
// или как лейбл загрузки в триггере таймлайна
<ChatTimelineTrigger loading>Размышляю…</ChatTimelineTrigger>
 
// настраиваемая скорость и ширина полосы
<ChatLoader duration={1.4} spread={3}>Searching the web</ChatLoader>

API

Свойство	По умолчанию	Описание
`children`	—	Строка для шиммера.
`as`	`"span"`	HTML-тег.
`duration`	`2`	Полная анимация (сек).
`spread`	`2`	Ширина светлой полосы (×длина текста).

На этой странице

Установка Использование API