AI Interfaces block

Working Indicator with Elapsed Time

The gap before the first token: a shimmer grid, a phase label that advances as the wait lengthens, and a running counter — which is the only honest answer to "is it stuck". The timer is hidden from the live region on purpose.

120 lineslucide-reactAdded 13 Aug 2026

loading
shimmer
elapsed
pending
reduced motion

What's included

components/agent-working-indicator.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add agent-working-indicator

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Reading your question

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/agent-working-indicator.tsx

/**
 * <AgentWorkingIndicator> — the "still here" state between the prompt and
 * the first token.
 *
 * A model can take fifteen seconds before it emits anything, and fifteen
 * seconds of nothing is indistinguishable from a dropped request. This is
 * the block that fills it, and the design constraints are unusual:
 *
 *  - It must convey elapsed time, because the honest answer to "is it stuck"
 *    is a number. A counter that ticks is proof of life in a way a spinner
 *    is not — a spinner keeps spinning after the socket dies.
 *  - The phase label changes as the wait lengthens, so a long request reads
 *    as progress rather than repetition.
 *  - It is `role="status"` with `aria-live="polite"`, but the *timer* is
 *    `aria-hidden`. A live region containing a number that changes ten times
 *    a second is a denial-of-service on a screen reader; the phase changes
 *    are what get announced, and they change every few seconds.
 *
 * Motion: the pixel grid is `motion-safe:` — pure decoration, and exactly
 * the sort of shimmer the preference exists to suppress. The timer keeps
 * running under reduced motion, because it is information, not motion.
 */

'use client'

import * as React from 'react'
import { Square } from 'lucide-react'

export interface AgentWorkingIndicatorProps {
  /** Phase labels, shown in order as the wait lengthens. */
  phases?: string[]
  /** Seconds each phase holds before the next one shows. */
  phaseSeconds?: number
  /** Start the timer paused, e.g. in a static preview. */
  paused?: boolean
  className?: string
}

const DEFAULT_PHASES = [
  'Reading your question',
  'Checking the warehouse schema',
  'Running the query',
  'Sanity-checking the numbers',
  'Writing it up',
]

/** 4×4 grid, lit in a spiral so the sweep reads as one moving shape. */
const SPIRAL = [0, 1, 2, 3, 7, 11, 15, 14, 13, 12, 8, 4, 5, 6, 10, 9]

export function AgentWorkingIndicator({
  phases = DEFAULT_PHASES,
  phaseSeconds = 3,
  paused = false,
  className = '',
}: AgentWorkingIndicatorProps) {
  const [tenths, setTenths] = React.useState(0)
  const [stopped, setStopped] = React.useState(paused)

  React.useEffect(() => {
    if (stopped) return
    const id = window.setInterval(() => setTenths((t) => t + 1), 100)
    return () => window.clearInterval(id)
  }, [stopped])

  const seconds = tenths / 10
  const phase = phases[Math.min(Math.floor(seconds / phaseSeconds), phases.length - 1)]

  return (
    <div className={`flex justify-center p-8 ${className}`}>
      <div className="flex w-full max-w-md items-center gap-4 rounded-2xl border border-border/60 bg-card px-4 py-3.5">
        {/* -- Pixel grid ------------------------------------------------ */}
        <div aria-hidden className="grid shrink-0 grid-cols-4 gap-[3px]">
          <style>{`
            @keyframes agent-pixel {
              0%, 100% { opacity: 0.15; }
              40%      { opacity: 1; }
            }
          `}</style>

          {SPIRAL.map((cell, i) => (
            <span
              key={cell}
              style={{ animationDelay: `${i * 70}ms` }}
              className="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"
            />
          ))}
        </div>

        {/* -- Label ----------------------------------------------------- */}
        <div className="min-w-0 flex-1">
          {/*
            The phase is announced; the timer is not. Putting a tenth-second
            counter inside a live region floods a screen reader with numbers
            and drowns out the thing worth hearing.
          */}
          <p role="status" className="min-w-0 break-words text-sm font-medium">
            {stopped ? 'Stopped' : phase}
          </p>

          <p aria-hidden className="mt-0.5 font-mono text-xs tabular-nums text-muted-foreground">
            {seconds.toFixed(1)}s elapsed
          </p>
        </div>

        {/* Always offered. A run the user cannot cancel is the reason they
            reload the page, which is worse than cancelling. */}
        <button
          type="button"
          onClick={() => setStopped(true)}
          disabled={stopped}
          className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border/60 px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-muted disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <Square aria-hidden className="h-3 w-3" />
          Stop
        </button>
      </div>
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/agent-working-indicator.tsx and import it where you need the section:

import { AgentWorkingIndicator } from '@/components/agent-working-indicator'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`phases`Phase labels, shown in order as the wait lengthens.	`string[]`	`DEFAULT_PHASES`
`phaseSeconds`Seconds each phase holds before the next one shows.	`number`	`3`
`paused`Start the timer paused, e.g. in a static preview.	`boolean`	`false`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

agent-working-indicator.html

<!--
  Working Indicator with Elapsed Time — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="flex justify-center p-8 ">
  <div class="flex w-full max-w-md items-center gap-4 rounded-2xl border border-border/60 bg-card px-4 py-3.5">
    <div aria-hidden="true" class="grid shrink-0 grid-cols-4 gap-[3px]">
      <style>@keyframes agent-pixel {
              0%, 100% { opacity: 0.15; }
              40%      { opacity: 1; }
            }</style>
      <span style="animation-delay:0ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:70ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:140ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:210ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:280ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:350ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:420ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:490ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:560ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:630ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:700ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:770ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:840ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:910ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:980ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
      <span style="animation-delay:1050ms" class="h-1.5 w-1.5 rounded-[2px] bg-primary opacity-40 motion-safe:animate-[agent-pixel_1.4s_ease-in-out_infinite] border border-transparent"></span>
    </div>
    <div class="min-w-0 flex-1">
      <p role="status" class="min-w-0 break-words text-sm font-medium">Reading your question</p>
      <p aria-hidden="true" class="mt-0.5 font-mono text-xs tabular-nums text-muted-foreground">0.0s elapsed</p>
    </div>
    <button type="button" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border/60 px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-muted disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square h-3 w-3" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect></svg>Stop</button>
  </div>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Agent Run Inspector5 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

6 more blocks in Agent Reasoning

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Agent Reasoning

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Agent Reasoning blocks

View category

Thought for 5.1 seconds5 steps

Dropping the largest single cancellation moves the under-20 figure from 6.1% to 5.4%. The pattern holds, so it is a cohort effect and not an outlier.

Collapsible Thinking Trace

The "thought for 5s" panel: a native details/summary outside, individually expandable steps inside — buttons rather than nested disclosures, which are announced as a disclosure within a disclosure.

Agent Reasoning256 lines1 dep11 Sept

Tool Call Chips

Dense tool invocations that open into their arguments and result, with status carried by icon and word rather than colour, and errors marked as alerts only once the user opens them.

Agent Reasoning258 lines1 dep10 Sept

Quarterly churn review

2 of 5 complete · 1 failed

Complete: Pull cancellations for Q3
2,481 rows from warehouse.subscriptions
2.7s
Complete: Join to account seat counts
Matched 2,463 of 2,481 — 18 accounts deleted
1.4s
Failed: Fetch exit-survey responses
CRM returned 429 — rate limited after 40 of 300
Running: Score accounts by churn risk
Running the model over the joined cohort
62%
Queued: Draft the summary

Live Agent Task List

Run status as rows — done, running, failed, queued — with native progress elements, per-task retry buttons that name their task, and progress announced from one small status region instead of every row.

Agent Reasoning234 lines1 dep

Deploy api-gateway to staging

Paused on step 3 of 5 · 211s · $0.14 spent so far

Read the deploy manifest — Done
infra/deploy.yaml, 240 lines
Resolve the image tag — Recovered
Registry timed out; used the digest pinned in the lockfile instead.
Recovered — what the later steps used came from the fallback, not from the registry.
Apply the migration — Failed
Blocked. The migration wants a lock the reporting job is holding.
- Attempt 1Lock not available after 60s60s · $0.04
- Attempt 2Lock not available after 60s60s · $0.04
- Attempt 3Lock not available after 60s60s · $0.04
Restart the workers — Waiting
Not started — blocked by the step above.
Verify the health check — Waiting
Not started.

Apply the migration could not complete

What the tool returned

ERROR: could not obtain lock on relation "orders" (SQLSTATE 55P03)
  detail: process 4417 holds AccessExclusiveLock
  hint: retrying will queue behind the same lock

What the agent thinks that means

The nightly reporting job took an exclusive lock on orders at 02:00 and has not released it. Retrying as-is will queue behind the same lock and time out again. Either wait for that job, or run the migration with a lock timeout and accept a partial apply.

Failed Run Trace

The trace after something broke: retries counted in the open with what each one cost, a step that was silently worked around drawn in amber rather than green, and the raw error kept apart from the agent’s reading of it.

Agent Reasoning337 lines1 dep2 Sept

What it tried before this answer

A retried step that is invisible reads as a slow agent. A retried step that is shown reads as a careful one, and it is the same run either way.

Agent Retry Log

What the agent tried, what failed, and what it did about it — the run history a user needs before they trust a second attempt.

Agent Reasoning153 linesNo deps10 Sept

What this run cost

Per step, not per month. A bill that only arrives in aggregate cannot be acted on — the useful version says which step was expensive and whether it needed to be.

Agent Cost Breakdown

What one run cost, per step, so an expensive answer is attributable rather than a monthly surprise.

Agent Reasoning149 linesNo deps10 Sept