Managing Loading States

Logic for Suspense boundaries and skeleton loaders. Use to prevent layout shifts during data fetching.

majiayu000 d0da51a 2 files · 1.4 KB Updated 567 repo stars

File contents

Loading States and Skeletons

When to use this skill

  • Data fetching pages (Tour List, Details).
  • Button submittals.

Techniques

  • Suspense: Wrap async components in <Suspense fallback={<Skeleton />} >.
  • Skeleton Cards: Match the height and width of the actual Tour Card.
  • Progressive Loading: Load text first, then images.

Instructions

  • No Layout Shift: Ensure skeletons have exact dimensions to prevent jumping content.
  • Visuals: Use a subtle pulse animation for skeletons.

majiayu000/claude-skill-registry-data/tree/main/data/managing-loading-states commit d0da51aa9c

Frequently asked questions

npx skillmds add majiayu000/managing-loading-states