interaction
Skeleton loading
Showing a greyed-out approximation of the incoming content while it loads, instead of a blank screen or a spinner.
A spinner says “something is happening”; a skeleton says “here is the shape of what’s coming” – grey bars where the headlines will be, grey blocks where the amounts will land. The page’s structure arrives before its data, so the eventual content drops into a layout that was already stable instead of shoving the page around.
It’s the loading member of the four data conditions every screen needs an answer for (loading, empty, error, populated) – a state in the precise sense: driven by data, entered and left automatically, never authored per-use. The discipline it rewards is deciding what the screen looks like in all four conditions at design time, not just the happy one.