name: managing-loading-states description: Logic for Suspense boundaries and skeleton loaders. Use to prevent layout shifts during data fetching.

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.