react-ui-patterns

Installation
Summary

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
SKILL.md

React UI Patterns

Core Principles

  1. Never show stale UI - Loading spinners only when actually loading
  2. Always surface errors - Users must know when something fails
  3. Optimistic updates - Make the UI feel instant
  4. Progressive disclosure - Show content as it becomes available
  5. 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();
Related skills
Installs
948
GitHub Stars
37.3K
First Seen
Jan 19, 2026