AgentSkillsCN

suspense-boundary-design

以交互式方式设计 React Suspense 边界。当你需要规划加载状态、配置边界粒度，或与 ErrorBoundary 结合使用时，此技能将为你提供专业支持。

SKILL.md
--- frontmatter
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

  1. •Loading units - Which components load independently?
  2. •Error handling - Show error UI, retry button, or bubble up?
  3. •Loading UI - Skeleton, spinner, or shimmer?

Pattern

tsx
import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary FallbackComponent={ErrorFallback}>
  <Suspense fallback={<Skeleton />}>
    <AsyncComponent />
  </Suspense>
</ErrorBoundary>

Rule: ErrorBoundary wraps Suspense (outside).

Best Practices

  1. •Match skeleton to content size (prevents layout shifts)
  2. •Avoid nested Suspense unless intentional waterfall
  3. •Group components sharing data under same boundary

Related