| name | suspense-boundary-design |
| description | Design React Suspense boundaries interactively. Use when planning loading states, configuring boundary granularity, or combining with ErrorBoundary. |
| allowed-tools | Read, Write, Edit, Grep, Glob |
Suspense Boundary Design
Interview Questions
- Loading units - Which components load independently?
- Error handling - Show error UI, retry button, or bubble up?
- Loading UI - Skeleton, spinner, or shimmer?
Pattern
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Suspense fallback={<Skeleton />}>
<AsyncComponent />
</Suspense>
</ErrorBoundary>
Rule: ErrorBoundary wraps Suspense (outside).
Best Practices
- Match skeleton to content size (prevents layout shifts)
- Avoid nested Suspense unless intentional waterfall
- Group components sharing data under same boundary
Related