Agent Loading States Agent Progress

1"use client";
2// beui.dev/components/agents/loading-states
3 
4import { motion, useReducedMotion } from "motion/react";
5import { useEffect, useState } from "react";
6import { EASE_IN_OUT } from "@/lib/ease";
7import { cn } from "@/lib/utils";
8 
9const GRID_CELLS = [
10  { id: "top-left", delay: 0 },
11  { id: "top-center", delay: 0.14 },
12  { id: "top-right", delay: 0.28 },
13  { id: "middle-left", delay: 0.42 },
14  { id: "middle-center", delay: 0.56 },
15  { id: "middle-right", delay: 0.7 },
16  { id: "bottom-left", delay: 0.84 },
17  { id: "bottom-center", delay: 0.98 },
18  { id: "bottom-right", delay: 1.12 },
19];
20 
21export interface AgentProgressProps {
22  /** Verb describing the agent's current activity. */
23  label?: string;
24  /** Controlled elapsed time in seconds. */
25  elapsedSeconds?: number;
26  /** Starting time for the internal timer, in seconds. */
27  initialSeconds?: number;
28  /** Whether the internal timer should advance. Ignored when elapsedSeconds is provided. */
29  running?: boolean;
30  className?: string;
31}
32 
33function formatElapsed(totalSeconds: number) {
34  const safeSeconds = Math.max(0, totalSeconds);
35  const minutes = Math.floor(safeSeconds / 60);
36  const seconds = (safeSeconds % 60).toFixed(1);
37  return minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
38}
39 
40export function AgentProgress({
41  label = "Churning",
42  elapsedSeconds,
43  initialSeconds = 0,
44  running = true,
45  className,
46}: AgentProgressProps) {
47  const reduce = useReducedMotion() ?? false;
48  const [internalSeconds, setInternalSeconds] = useState(initialSeconds);
49 
50  useEffect(() => {
51    if (elapsedSeconds !== undefined || !running) return;
52 
53    const startedAt = performance.now() - initialSeconds * 1000;
54    const timer = window.setInterval(() => {
55      setInternalSeconds((performance.now() - startedAt) / 1000);
56    }, 100);
57 
58    return () => window.clearInterval(timer);
59  }, [elapsedSeconds, initialSeconds, running]);
60 
61  const elapsed = elapsedSeconds ?? internalSeconds;
62 
63  return (
64    <span
65      role="status"
66      aria-label={`${label}, in progress`}
67      className={cn(
68        "inline-flex items-center gap-3 font-mono text-sm text-muted-foreground",
69        className,
70      )}
71    >
72      <span
73        aria-hidden="true"
74        className="grid size-5 shrink-0 grid-cols-3 gap-[2px]"
75      >
76        {GRID_CELLS.map(({ id, delay }) => (
77          <motion.span
78            key={id}
79            className="rounded-[1px] bg-current"
80            animate={
81              reduce
82// … truncated