react-ui-patterns

SKILL.md

React UI patterns for loading states, error handling, and async data in components.

Three core patterns: show loading indicators only when data is absent, always surface errors to users, and disable buttons during async operations to prevent duplicate submissions

Includes decision trees and component examples for skeleton vs. spinner selection, error state hierarchy (inline, toast, banner, full screen), and empty state requirements for all collections

Covers form submission workflows, optimistic updates, and progressive content disclosure with practical TypeScript/React code examples

Provides anti-patterns checklist to avoid common mistakes like stale UI flashes, silently swallowed errors, and uncontrolled button interactions

React UI Patterns

Core Principles

Never show stale UI - Loading spinners only when actually loading

Always surface errors - Users must know when something fails

Optimistic updates - Make the UI feel instant

Progressive disclosure - Show content as it becomes available

Graceful degradation - Partial data is better than no data

Loading State Patterns

The Golden Rule

Show loading indicator ONLY when there's no data to display.

// CORRECT - Only show loading when no data exists
const { data, loading, error } = useGetItemsQuery();