Every skeleton screen I've shipped has had the same bug: it doesn't match the real content's height, so the moment data arrives the page jumps.
We fixed it by making the skeleton render the same layout boxes as the loaded state, with the text replaced by grey bars of the same line height. Sounds obvious, and it took three attempts because our components measured themselves after mount.
Three rules we ended up with:
The skeleton uses the same container, padding, and grid as the loaded state. No separate stylesheet.
Fixed sizes for anything that can't shift (avatars, thumbnails), minimum heights for anything with variable text.
Reserve space for the empty state too. An account with zero items should not move the footer.
The win wasn't prettier loading. It was that scroll position survived a slow network, and the back button stopped landing people in the wrong place. Skeleton screens are a layout problem wearing a loading costume.
Top comments (0)