# Status Pill
> A tiny working indicator that rolls through what it's doing, from Reading to Searching to Writing, eases to fit each word and lands on a green check when it's finished.
- Page: https://devl.dev/components/status-pill
- Kind: component · Conversation
- Install: `npx shadcn@latest add https://devl.dev/r/status-pill.json`
- Raw source: https://devl.dev/raw/status-pill.tsx
- npm: motion
- License: MIT. The coss ui components it uses (https://coss.com/ui) are AGPL-3.0.
## Usage
```tsx
import { StatusPill } from "@/components/status-pill";
export default function StatusPillDemo() {
return (
);
}
```
## Props
| Prop | Type | Default |
| --- | --- | --- |
| `phases`? | `string[]` | `["Reading", "Searching", "Writing"]` |
| `doneLabel`? | `string` | `"Done"` |
| `interval`? | `number` | `1400` |
| `done`? | `boolean` | |
| `loop`? | `boolean` | `false` |
| `size`? | `"sm" \| "default"` | `"default"` |
| `className`? | `string` | |
## Source: components/status-pill.tsx
```tsx
"use client";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
export interface StatusPillProps {
phases?: string[];
doneLabel?: string;
interval?: number;
done?: boolean;
loop?: boolean;
size?: "sm" | "default";
className?: string;
}
const spring = { type: "spring", stiffness: 420, damping: 34 } as const;
const easeOut = [0.23, 1, 0.32, 1] as const;
function useMountedReducedMotion() {
const prefers = useReducedMotion();
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return mounted && !!prefers;
}
export function StatusPill({
phases = ["Reading", "Searching", "Writing"],
doneLabel = "Done",
interval = 1400,
done: doneProp,
loop = false,
size = "default",
className,
}: StatusPillProps) {
const reduce = useMountedReducedMotion();
const [step, setStep] = useState(0);
const controlled = doneProp !== undefined;
const done = controlled ? doneProp : step >= phases.length;
useEffect(() => {
if (controlled) {
if (doneProp) return;
const t = setTimeout(() => setStep((s) => (s + 1) % phases.length), interval);
return () => clearTimeout(t);
}
if (step >= phases.length) {
if (!loop) return;
const t = setTimeout(() => setStep(0), interval * 1.8);
return () => clearTimeout(t);
}
const t = setTimeout(() => setStep((s) => s + 1), interval);
return () => clearTimeout(t);
}, [controlled, doneProp, step, phases.length, interval, loop]);
const label = done ? doneLabel : (phases[step % phases.length] ?? "");
const text = done ? label : `${label}…`;
const measureRef = useRef(null);
const [width, setWidth] = useState();
useLayoutEffect(() => {
if (measureRef.current) setWidth(measureRef.current.offsetWidth);
}, [text]);
return (
{text}
{done ? {text} : {text} }
);
}
function ShimmerText({ children }: { children: string }) {
const reduce = useMountedReducedMotion();
return (
{children}
);
}
export function StatusSpinner({ done = false, size = 18 }: { done?: boolean; size?: number }) {
const reduce = useMountedReducedMotion();
return (
{done ? (
) : (
)}
);
}
```