# loading-and-error-states

> Loading and error UX patterns that avoid layout shift and improve clarity. Keywords: loading, error, suspense, skeleton, error boundary, CLS.

- Author: willyu1007
- Repository: willyu1007/AI_First_Template
- Version: 20251224182030
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/willyu1007/AI_First_Template
- Web: https://mule.run/skillshub/@@willyu1007/AI_First_Template~loading-and-error-states:20251224182030

---

---
name: loading-and-error-states
description: "Loading and error UX patterns that avoid layout shift and improve clarity. Keywords: loading, error, suspense, skeleton, error boundary, CLS."
---

# 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