# Shimmer: Status updates

> Shimmer while a task runs, then sweep once with `shimmer-once` when it finishes. Changing the key restarts the sweep for each new step.

Example: https://hextaui.com/docs/shimmer/examples/status
Component docs: https://hextaui.com/docs/shimmer.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/shimmer-status.json
```

This adds `components/examples/shimmer/status.tsx` with the Shimmer component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/shimmer/status.tsx"
"use client"

import * as React from "react"
import { cn } from "cn"

import { Button } from "@/components/ui/button"

const steps = ["Reading files…", "Planning changes…", "Writing code…"]

export function ShimmerStatus() {
  const [step, setStep] = React.useState<number | null>(null)

  React.useEffect(() => {
    if (step === null || step >= steps.length) {
      return
    }
    const timer = setTimeout(() => setStep(step + 1), 1600)
    return () => clearTimeout(timer)
  }, [step])

  const done = step !== null && step >= steps.length

  return (
    <div className="flex flex-col items-center gap-4">
      <p
        key={step ?? "idle"}
        role="status"
        className={cn(
          "h-5 text-sm text-muted-foreground",
          step !== null && "shimmer",
          done && "shimmer-duration-1200 shimmer-once"
        )}
      >
        {step === null ? "Ready" : done ? "Done." : steps[step]}
      </p>
      <Button variant="outline" size="sm" onClick={() => setStep(0)}>
        Run task
      </Button>
    </div>
  )
}
```

## More Shimmer examples

- [Options](https://hextaui.com/docs/shimmer/examples/options.md)