Composer Loader

The loading state that wraps a chat composer while the agent works - an iridescent light band traveling the pill's rim at constant speed, led by a crisp refraction line with a soft bloom bleeding inward behind it. Toggling it on and off fades the whole effect, so the composer reads as lighting up rather than switching.

Installation

You can add this loading effect using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add composer-loader

In a conversation

The real-life scene: the user's message lands, the composer lights up while the AgentThinking thinks above it and the composer controls morph into liquid glass, then the reply arrives and everything fades back. Drive it all with one waiting flag - the fade-in and fade-out are built in.

57%

const [waiting, setWaiting] = useState(false);
async function send(message: string) {  setWaiting(true);           // light fades in, AgentThinking appears  await complete(message);  setWaiting(false);          // reply landed — everything fades out}
{waiting && <AgentThinking variant="infinity" />}<ComposerLoader active={waiting}>  <Composer className="bg-transparent shadow-none" /></ComposerLoader>

The composer itself

The pill in these previews is the Composer, the AI Chat template's input shipped as its own Pro block: working attachment and model menus, mic and send controls, the status bar, and the liquid-glass treatment the demo uses. Composer Loader wraps any composer you already have; pair it with this one for the exact look above.

See the Composer component

Tuning

The default light is the tuned house style. colors spreads four stops across the pill, arc sets how much of the rim the band occupies, bloom and bloomStrength shape how far the light bleeds inward, and speed is seconds per lap. The band travels at constant speed and bends around the end caps; motion stops under prefers-reduced-motion.

{/* Everything ships tuned; override per surface as needed */}<ComposerLoader  colors={["#5eead4", "#46baec", "#e633a4", "#00faa7"]}  speed={4.5}        // seconds per lap  arc={120}          // how much of the rim the band occupies  intensity={0.7}  bloom={16}         // how far the light bleeds inward, px  bloomStrength={0.3}  reverse={false}  radius={26}        // omit for a full pill>  ...</ComposerLoader>