perceived-latency-masklisted

# Perceived Latency Mask The same 800ms wait feels like two different products depending on what's on screen. A blank region or a centred spinner says "nothing is here yet, and I don't know what will be" — the user's attention has nowhere to land and every millisecond registers. A skeleton that already has the shape of the content says "here's what's coming, it's on its way": the eye starts parsing layout, the brain pre-commits to the structure, and when the content lands in exactly those slots the wait is barely remembered. Skeletons don't make the network faster; they make the wait *legible*, and legible waits feel shorter. That only works if the skeleton is honest about the shape. A generic grey rectangle where a two-column section will appear gives the eye nothing to hold — and when the real layout arrives somewhere else, the jump costs more than the skeleton saved. ## Rules of the shape **Same container, same grid, only the leaves swapped.** Build the skeleton with the *real* layout classes — `.editorial-container`, `.card`, `.grid` — and replace only the text, images, and controls inside with bars. If a section is a rail + 62ch copy column, its skeleton is a rail + 62ch copy column. This guarantees zero layout shift on swap and is the difference between a skeleton and a decoration. **Bars at the real type sizes.** A heading placeholder is as tall as the heading (`height: var(--fs-h2)`); paragraph bars are one line-height tall (`1.05rem` for 1rem text) and stacked a