AgentSkillsCN

managing-loading-states

合理运用 Suspense 边界与骨架加载器逻辑，避免在数据获取过程中发生布局突变，确保界面呈现的流畅性与稳定性。

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