react-ui-patterns

SKILL.md

Modern React UI patterns for loading states, error handling, and data fetching.

Covers five core principles: never show stale UI, always surface errors, use optimistic updates, progressive disclosure, and graceful degradation

Provides decision trees and component patterns for loading indicators, skeleton screens, error states, empty states, and button submission handling

Includes critical anti-patterns to avoid, such as showing spinners when cached data exists, silently swallowing errors, and failing to disable buttons during async operations

Offers a pre-submission checklist covering UI states, data mutations, and user feedback requirements

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();