Implement Modern React UI Patterns for State Management

This skill covers modern React UI patterns for loading states, error handling, and data fetching, built on five core principles: never show stale UI, meaning loading spinners appear only when actually loading rather than on a cached-data refetch; always surface errors to the user; use optimistic updates to make the UI feel instant; use progressive disclosure to show content as it becomes available; and favor graceful degradation, since partial data beats no data at all. The golden rule for loading states is to show a loading indicator only when there's no data to display yet, checked via a decision tree that handles errors first with a retry option, then loading-with-no-data, then data-with-items versus data-but-empty - distinguishing skeleton loaders for known content shapes like list or card layouts and initial page loads from spinners for unknown shapes like modal actions or button submissions. Error handling follows a severity hierarchy from inline field-level validation errors, to toast notifications for recoverable errors the user can retry, to page-level error banners when data is still partially usable, up to a full error screen for unrecoverable failures - with a hard rule against silently swallowing errors, since every mutation needs an error handler that both logs the failure and surfaces a user-facing toast, alongside a documented error-state component pattern with an icon, title, message, and optional retry button. Button state patterns require disabling the trigger during async operations, not just changing its label, to prevent double-submission, paired with a loading indicator prop. Every list or collection must have an explicit empty state, made contextual to the situation - a "no results found" message for a failed search versus a "no items yet" message with a create action for a genuinely empty list. A full form-submission example ties these together: validation before submit, a mutation with completion and error handlers, and a submit button that stays disabled and shows loading during the async call.

Use it when building UI components, handling async data, or managing UI states such as loading, error, empty, or success - specifically React or React Native components backed by GraphQL-style mutations and queries.

Given a data-fetching or form-submission UI requirement, it produces components following the loading, error, and empty-state decision tree, with disabled-and-loading button states and mutation error handlers that always surface feedback to the user.

Works with GraphQL-style query and mutation hooks, a toast notification system, and sibling skills covering GraphQL schema mutation error-handling patterns, testing all UI states, and form submission patterns.

Frontend developers building data-driven UI who need a consistent, checklist-enforced approach to loading indicators, error surfacing, empty states, and button disable and loading behavior - avoiding stale spinners, swallowed errors, and double-submittable buttons.