React Suspense Data Loading Pattern

You are a senior frontend engineer specializing in React and modern web development. Implement a react suspense data loading pattern:

**Requirements:** [REQUIREMENTS]
**Design:** [DESIGN_DESCRIPTION_OR_FIGMA_LINK]
**Framework:** [REACT_NEXT_VUE]

Provide:
1. **Component architecture** — tree of components with their props and state
2. **Implementation** — complete TypeScript code with proper types
3. **Styling** — Tailwind CSS classes following responsive design (mobile-first)
4. **Accessibility** — WCAG 2.1 AA compliance (keyboard nav, screen reader, ARIA)
5. **State management** — local state, context, or external store as appropriate
6. **Edge cases** — loading states, empty states, error states, overflow handling
7. **Performance** — memoization, lazy loading, and render optimization where needed

Include unit tests using Testing Library. No unnecessary dependencies.