Skip to content
prfct.dev

Loading

Skeletons, spinners, progress and optimistic updates — chosen by how long people will wait and how much you know.

Waiting feels shorter when people can see that something is happening and roughly what will appear. Choose the indicator by how long the wait is and how much you know about it.

Team members

The skeleton matches the final layout exactly, so nothing shifts when data arrives.

Choosing an indicator

WaitKnown shape?Use
< 100ms—Nothing. Anything shown would flash.
100ms – 1sYesA skeleton that matches the final layout.
100ms – 1sNoA spinner, delayed ~200ms so fast responses never show it.
1s – 10s—A progress bar if you can measure progress; otherwise a spinner with a label.
> 10s—Progress with an estimate, and let people leave and come back — notify them when done.

Skeletons

  • Match the final layout exactly — same heights, same rhythm — so nothing shifts when content arrives.
  • Mark the loading region with aria-busy="true"; skeletons themselves are aria-hidden.
  • The shimmer stops with reduced motion; the placeholder shape remains.

Buttons

Actions that take time show their own progress with Button loading: the label is replaced by a spinner without the button changing width, activation is blocked, and focus stays put.

Optimistic updates

When an action almost always succeeds — starring, archiving, reordering — update the interface immediately and reconcile in the background. If it fails, roll back and say so with a toast. Pair destructive optimistic actions with undo rather than confirmation; see Destructive actions.