React Ui Patterns

A solid reference for handling the UI states that always seem to trip up React developers. Covers the essentials like only showing spinners when there's actually no data (not on every refetch), surfacing errors to users instead of silently logging them, and always disabling buttons during async operations. The decision trees and anti-pattern examples are genuinely helpful for code review. It's opinionated in the right ways, like the "never show stale UI" principle and the error handling hierarchy. Most useful when you're building data-heavy UIs and want consistent patterns across your codebase rather than reinventing loading states for every component.

skills.sh installs: 1.2K
GitHub stars: 43.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --skill react-ui-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

React UI Patterns

Core Principles

Never show stale UI - Loading spinners only when actually loading
Always surface errors - Users must know when something fails
Optimistic updates - Make the UI feel instant
Progressive disclosure - Show content as it becomes available
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, refetch } = useGetItemsQuery();

if (error) return <ErrorState error={error} onRetry={refetch} />;
if (loading && !data) return <LoadingState />;
if (!data?.items.length) return <EmptyState />;

return <ItemList items={data.items} />;

// WRONG - Shows spinner even when we have cached data
if (loading) return <LoadingState />; // 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

SKILL.md on GitHub