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

if (error) return ;
if (loading && !data) return ;
if (!data?.items.length) return ;

return ;

// WRONG - Shows spinner even when we have cached data
if (loading) return ; // Flashes on refetch!

Loading State Decision Tree

Is there an error?
  → Yes: Show error state with retry option
  → No: Continue

Is it loading AND we have no data?
  → Yes: Show loading indicator (spinner/skeleton)
  → No: Continue

Do we have data?
  → Yes, with items: Show the data
  → Yes, but empty: Show empty state
  → No: Show loading (fallback)

Skeleton vs Spinner

Error Handling Patterns

The Error Handling Hierarchy

1. Inline error (field-level) → Form validation errors
2. Toast notification → Recoverable errors, user can retry
3. Error banner → Page-level errors, data still partially usable
4. Full error screen → Unrecoverable, needs user action

Always Show Errors

CRITICAL: Never swallow errors silently.

// CORRECT - Error always surfaced to user
const [createItem, { loading }] = useCreateItemMutation({
  onCompleted: () => {
    toast.success({ title: 'Item created' });
  },
  onError: (error) => {
    console.error('createItem failed:', error);
    toast.error({ title: 'Failed to create item' });
  },
});

// WRONG - Error silently caught, user has no idea
const [createItem] = useCreateItemMutation({
  onError: (error) => {
    console.error(error); // User sees nothing!
  },
});

Error State Component Pattern

interface ErrorStateProps {
  error: Error;
  onRetry?: () => void;
  title?: string;
}

const ErrorState = ({ error, onRetry, title }: ErrorStateProps) => (
  <div className="error-state">
    
    <h3>{title ?? 'Something went wrong'}</h3>
    <p>{error.message}</p>
    {onRetry && (
      Try Again
    )}
  </div>
);

Button State Patterns

Button Loading State

  Submit

Disable During Operations

CRITICAL: Always disable triggers during async operations.

// CORRECT - Button disabled while loading

  Submit

// WRONG - User can tap multiple times

  {isSubmitting ? 'Submitting...' : 'Submit'}

Empty States

Empty State Requirements

Every list/collection MUST have an empty state:

// WRONG - No empty state
return ;

// CORRECT - Explicit empty state
return (
  }
  />
);

Contextual Empty States

// Search with no results

// List with no items yet

Form Submission Pattern

const MyForm = () => {
  const [submit, { loading }] = useSubmitMutation({
    onCompleted: handleSuccess,
    onError: handleError,
  });

  const handleSubmit = async () => {
    if (!isValid) {
      toast.error({ title: 'Please fix errors' });
      return;
    }
    await submit({ variables: { input: values } });
  };

  return (
    <form>
      
      
        Submit
      
    </form>
  );
};

Anti-Patterns

Loading States

// WRONG - Spinner when data exists (causes flash)
if (loading) return ;

// CORRECT - Only show loading without data
if (loading && !data) return ;

Error Handling

// WRONG - Error swallowed
try {
  await mutation();
} catch (e) {
  console.log(e); // User has no idea!
}

// CORRECT - Error surfaced
onError: (error) => {
  console.error('operation failed:', error);
  toast.error({ title: 'Operation failed' });
}

Button States

// WRONG - Button not disabled during submission
Submit

// CORRECT - Disabled and shows loading

  Submit

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