1 variant

Thinking Loader

A small loading indicator for the moment an agent is working, before there's a response to stream.

Thinking

usage.tsx

import { ThinkingLoader } from "@/components/registry/thinking-loader";

export function AgentStatus() {
  return <ThinkingLoader showElapsed />;
}

"use client";

import { useReducedMotion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

const CELLS = 9;
const MIN_PULSE_MS = 500;
const MAX_PULSE_MS = 1100;

function useElapsed(active: boolean) {
  const [ms, setMs] = useState(0);

90 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/thinking-loader

Props

labelstringDefault "Thinking"

Status text beside the grid, announced once.

showElapsedbooleanDefault false

Adds a live timer. It is hidden from the live region, since a number changing ten times a second cannot be read aloud.

classNamestring

Merged last, so anything passed here wins over the component's own classes.