OpenSkillIndex← back to search
claude-code

Claude-skill-registry-data managing-loading-states

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

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry-data
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry-data "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/managing-loading-states" ~/.claude/skills/majiayu000-claude-skill-registry-data-managing-loading-states && rm -rf "$T"
manifest: data/managing-loading-states/SKILL.md
source content

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.