# Willyu1007 AI First Template Loading And Error States > Loading and Error States - Skill: `tomevault-io/willyu1007-ai-first-template-loading-and-error-states` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/willyu1007-ai-first-template-loading-and-error-states` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/willyu1007-ai-first-template-loading-and-error-states/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/willyu1007-ai-first-template-loading-and-error-states --- # Loading and Error States This skill provides patterns for consistent loading and error UX. --- ## 1. Avoid layout shift (CLS) - Reserve space for content during loading (skeletons, placeholders). - Avoid patterns that drastically change layout between loading and loaded states. --- ## 2. Choose a consistent strategy Two common approaches: - **Suspense-based**: use Suspense boundaries + error boundaries. - **Explicit state-based**: `isLoading` / `isError` flags with consistent layout. Pick one approach per application (or per major area) and apply consistently. --- ## 3. Error boundaries (recommended) For unexpected errors, prefer an error boundary that: - renders a safe fallback UI - logs/captures the error to monitoring - offers a retry action if appropriate --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.