Spinners Are the UX Equivalent of "TODO: Fix Later"
Blog post from Mergify
Replacing spinners with skeletons in UI design can significantly improve user experience by providing context and maintaining layout stability, as demonstrated in a recent project involving chart widgets. While spinners often leave users guessing about what content is loading, skeletons shaped like the final content, such as charts or tables, set clear expectations and reduce perceived wait times. This approach highlights the importance of metrics like Cumulative Layout Shift (CLS), traditionally seen as an SEO concern, which actually addresses user experience issues by preventing unexpected interface movements that can cause misclicks and disrupt user trust. A well-designed skeleton, which mirrors the final layout, prevents CLS by reserving the correct space before real data loads, ensuring the layout remains stable. In practice, skeletons should match the loaded state in terms of layout and structure to avoid introducing new UX problems like layout shifts or misleading expectations. The lesson learned is that loading states should be integral to the UI layout, aligning with design rules to prevent user dissatisfaction, whereas spinners should be reserved for situations where the final content cannot be anticipated.