suspense-patterns

What problem does it solve?

This Skill helps you design React loading behavior so your UI streams smoothly instead of blocking on the slowest part or flashing fallbacks on updates.

Core Features & Use Cases

• Boundary placement for loading granularity: decide which parts should share a fallback and which parts should load independently.
• Suspense + ErrorBoundary pairing: structure failure and loading modes correctly so errors don’t leave you stuck in a loading state.
• Flicker-free updates with transitions: use startTransition/useTransition to keep previously-rendered content visible while new data loads.
• Parallel vs waterfall avoidance: prevent sequential fetching by starting independent work at the same tree level.
• React 18+ and React 19 use hook coverage: handle both thrown-Promise Suspense and use(promise) patterns across Server/Client boundaries, including Next.js App Router loading.tsx.

Quick Start

Use suspense-patterns to review your React Suspense and ErrorBoundary placement for a streaming Next.js page, and rewrite it so slow sections stream independently without waterfall fetching or fallback flicker.