01
File-list skeleton
Skeleton
app.put.io fills every file-list row it hasn't fetched yet with this placeholder, on first load and while paging. Same row box, so nothing jumps.
grid60px rows: disabled checkbox, 25px icon, 13px title bar, 9px subtitle bar
base--component-bg, radius 4
shimmer135° sweep to --component-bg-hover, 1s loop
widthsrandom, up to 50% of the row
motionthe system wants a static fallback under prefers-reduced-motion; app.put.io always shimmers
02
Which loading state, when
skeleton
Layout known, data pending. Lists, page headers, previews. Show immediately.
spinner
Layout unknown or action-scoped. Button loading, modal submit, player buffering.
progress bar
Measurable work. Transfers, zips, uploads. Yellow fill; never a spinner when you know the percent.
empty state
Loaded, and there is nothing. Never render an empty state while loading, that reads as data loss. See Brand · Empty state.
app.put.io also skeletons settings-style list rows, page headers, previews and the folder picker.