loading-states-and-perceived-performance

# Loading States and Perceived Performance Users don't mind waiting as much if they understand *what* they are waiting for and *how much* progress is being made. Perceived performance is the design work of making a system feel faster than it actually is. --- ## Choosing the Right Loading State | Wait Duration | Best Pattern | Use for | |---|---|---| | **Short (< 1s)** | **Inline Spinner / Loader** | Button actions, small updates, quick data fetches | | **Medium (1s – 3s)** | **Skeleton Screen** | Cards, lists, dashboards, profile pages | | **Long (> 3s)** | **Determinate Progress Bar** | File uploads, complex exports, heavy processing | | **Full Page** | **Staggered Entry / Animated Sections** | Initial app load, hero sections, immersive transitions | --- ## Simple Cases: Spinners and Loaders Use spinners for small, contained actions where the layout doesn't change significantly. - **Button Spinners:** Replace button text or sit alongside it. The button should enter a `disabled` state to prevent double-submissions. - **Micro-Loaders:** A small 16–24px circle for inline updates (e.g., saving a single field). - **Animation Tip:** A "spring-loaded" rotation (easing in and out) feels more premium than a constant linear rotation. ```css @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner { animation: spin 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite; } ``` --- ## Skeleton Screens (Glimmer/Shimmer) Skeleton screens pro...