Dots loader

bunx shadcn@latest add @nalarx/dots-loader

Usage

Use it for agent work in progress (chat status, a running row in history). For a page or a control that is loading, use Spinner or Skeleton.

import { DotsLoader } from "@/components/ui/nx/DotsLoader";

<span className="inline-flex items-center gap-2">
  <DotsLoader /> Thinking
</span>

Thinking

Prop	Type	Default
`dot`	`number`	`4`	Side of one dot in px. The grid is three dots plus two gaps (1.5px, or 1px under 4px dots).
`className`	`string`

Decorative (aria-hidden): put the status text beside it. The dots stand still under reduced motion.

DotsLoader in both apps (components/ui/DotsLoader.tsx) and the .nx-dots-loader rule plus @keyframes nx-pixel-on in globals.css.