· 1 min read · AI, Web development

Animated AI status indicators for React

The Golden Gate Bridge in fog
Photo: Jordan McQueen, CC0

Thinking Orbs is a React library of animated AI status indicators. It looks nicely made. I haven't used it.

A pretty orb is the new "Loading..." if it tells you nothing. Dropping one in takes a minute. Deciding what it should say is the real design work.

Look at the states: Compacting, Retrying, Background Tasks. Does a normal user care what compacting is? Probably not. That's what the machine is doing, not what the person needs to know.

Tie the animation to real events or don't animate it. An orb that keeps pulsing after the agent hung is the worst case, and the page's example sets the state by hand, so it can't show that. It also doesn't mention reduced motion. Check that, the screen reader label and the pause first. Then admire the orb.

Comments