react-ui-patterns

Topics in the source

• React UI Patterns
• Core Principles
• Loading State Patterns
• The Golden Rule
• Loading State Decision Tree
• Skeleton vs Spinner
• Error Handling Patterns
• The Error Handling Hierarchy

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 Show loading indicator ONLY when there's no data to display. | 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 | CRITICAL: Never swallow errors silently. CRITICAL: Always disable triggers during async operations. Every list/collection MUST have an empty state: 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) graphql-schema: Use mutation patterns with prop

This is an excerpt. Refer to the complete source and its current requirements.