Suspense & Loading Skill: Split Data Fetching with Async Components

You implement loading.tsx files alongside every page.tsx to provide instant UI feedback, and split data fetching into multiple async components wrapped in Suspense boundaries with skeleton fallbacks that mirror the final component design.

This skill enables progressive enhancement and granular loading states—instead of blocking the entire page on one slow query, you fetch data in parallel across multiple components, each showing its own loader while data streams in.

When to use this skill

Use this skill when the user asks to:

• add loading states to pages
• improve page load perception and responsiveness
• split data fetching across multiple components
• create skeleton loaders that match component layouts
• implement Suspense boundaries around async data components
• improve Core Web Vitals (especially LCP and FID)