CyclingText

import { CyclingText } from "@fanvue/ui";
import type { CyclingTextProps, CyclingTextSizing } from "@fanvue/ui";

import { CyclingText } from "@fanvue/ui";

const STAGES = [
  "Thinking",
  "Reading messages",
  "Drafting reply",
  "Connecting the dots",
  "Almost there",
];

<CyclingText
  items={STAGES}
  intervalMs={1800}
  transitionMs={380}
  direction="up"
  sizing="longest"
/>

import { CyclingText } from "@fanvue/ui";

<div className="w-80 rounded-md border border-border-default bg-background-primary px-3 py-2 text-content-tertiary">
  <CyclingText
    items={["Search creators…", "Find a fan…", "Look up a transaction…", "Browse posts…"]}
  />
</div>

import { CyclingText } from "@fanvue/ui";

const STAGES = [
  "Thinking",
  "Reading messages",
  "Drafting reply",
  "Connecting the dots",
  "Almost there",
];

<CyclingText items={STAGES} sizing="current" />

import { Button, CyclingText, SpinnerIcon } from "@fanvue/ui";

const STAGES = [
  "Thinking",
  "Reading messages",
  "Drafting reply",
  "Connecting the dots",
  "Almost there",
];

<Button variant="secondary">
  <SpinnerIcon className="mr-2 size-4 animate-spin" />
  <CyclingText items={STAGES} />
</Button>

import { CyclingText, SpinnerIcon } from "@fanvue/ui";

const STAGES = [
  "Thinking",
  "Reading messages",
  "Drafting reply",
  "Connecting the dots",
  "Almost there",
];

<div className="inline-flex items-center gap-2 text-content-tertiary">
  <SpinnerIcon className="size-4 animate-spin" />
  <CyclingText items={STAGES} />
</div>