react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching.
- Covers five core principles: never show stale UI, always surface errors, use optimistic updates, progressive disclosure, and graceful degradation
- Provides decision trees and component patterns for loading indicators, skeleton screens, error states, empty states, and button submission handling
- Includes critical anti-patterns to avoid, such as showing spinners when cached data exists, silently swallowing errors, and failing to disable buttons during async operations
- Offers a pre-submission checklist covering UI states, data mutations, and user feedback requirements
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 } = useGetItemsQuery();
More from sickn33/antigravity-awesome-skills
docker-expert
You are an advanced Docker containerization expert with comprehensive, practical knowledge of container optimization, security hardening, multi-stage builds, orchestration patterns, and production deployment strategies based on current industry best practices.
15.0Knodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
11.2Ktypescript-expert
TypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and modern tooling.
8.3Kapi-security-best-practices
Implement secure API design patterns including authentication, authorization, input validation, rate limiting, and protection against common API vulnerabilities
7.0Kclean-code
This skill embodies the principles of \"Clean Code\" by Robert C. Martin (Uncle Bob). Use it to transform \"code that works\" into \"code that is clean.\"
6.5Knextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
5.1K