Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

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. Loading State Decision Tree Skeleton vs Spinner Use Skeleton When Use Spinner When Known content shape Unknown content shape List/card layouts Modal actions Initial page load Button submissions Content placeholders Inline operations Error Handling Patterns The Error Handling Hierarchy Always Show Errors CRITICAL: Never swallow errors silently. Error State Component Pattern Button State Patterns Button Loading State Disable During Operations CRITICAL: Always disable triggers during async operations. Empty States Empty State Requirements Every list/collection MUST have an empty state: Contextual Empty States Form Submission Pattern Anti Patterns Loading States Error Handling Button States Checklist Before completing any UI component: UI States: [ ] Error state handled and shown to user [ ] Loading state shown only when no data exists [ ] Empty state provided for collections [ ] Buttons disabled during async operations [ ] Buttons show loading indicator when appropriate Data & Mutations: [ ] Mutations have onError handler [ ] All user actions have feedback (toast/visual) Integration with Other Skills graphql schema : Use mutation patterns with proper error handling testing patterns : Test all UI states (loading, error, empty, success) formik patterns : Apply form submission patterns When to Use This skill is applicable to execute the workflow or actions described in the overview. Limitations Use this skill only when the task clearly matches the scope described above. Do not treat the output as a substitute for environment specific validation, testing, or expert review. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

react-ui-patterns