Spinner

A small spinning circle that says something is working.

ui.spinnercomponents/ui/spinner.tsx

Use case

For the AI

Use a spinner for a short wait with no shape to preview: checking a code, sending a message, refreshing a panel. When the wait starts from a button, pass loading to Button, which draws this spinner inside the button and disables it. It spins a little faster than usual, which makes the wait feel shorter.

Use it when

A short wait after a press (saving, sending, checking)
A panel refreshing in place
A small area waiting on one answer

Use something else when

The shape of what is loading is known: Skeleton
A task where you can count how much is done: Progress
Saying the work finished: Toast

Examples

A little faster than usual: loading feels quicker

Code

Import

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

Usage

export function SaveButton({ saving, onSave }: { saving: boolean; onSave: () => void }) {
  return (
    <Button loading={saving} onClick={onSave}>
      Save Changes
    </Button>
  )
}

export function PanelRefreshing() {
  return (
    <div className="grid h-32 place-items-center">
      <Spinner className="size-5" aria-label="Refreshing the orders" />
    </div>
  )
}

Rules

Size it with a size class: size-4, size-5 or size-6.
On the button that started the work, pass loading to Button instead of placing a Spinner: it keeps the button's width and disables it.
It carries role="status" and aria-label="Loading"; standing alone, pass an aria-label that names the wait (Checking the code).
Remove it when the work ends and show the outcome (the result in place, or a toast).