empty-error-states

name	Empty & Error States
description	ASEGURAR que cada componente de UI asíncrono maneje los cuatro estados: Cargando, Vacío, Error, Éxito. Prevenir pantallas en blanco, spinners atascados, estados vacíos confusos y fallos de página completa por el error de un componente. Activadores: "handle (the|the) loading state", "what if there's no data?", "handle API errors (on|in the) frontend", "polish the UI".
category	product-polish
version	3.0.0
last_updated	2026-06-28T00:00:00.000Z
stacks	["React 19.2","Vue 3","Next.js 16"]
triggers	[{"pattern":"(handle|fix|add) (the|a) loading (state|indicator)","action":"AÑADIR esqueleto que coincida con la geometría del diseño"},{"pattern":"(handle|what if) (there's|there is) no data","action":"AÑADIR estado Vacío con CTA"},{"pattern":"(handle|fix) (api|server) errors (on|in) the frontend","action":"AÑADIR estado Error con botón de reintentar"}]
related_skills	["component-architecture-patterns","dashboard-information-architecture","performance-budgets-and-cwv"]
lang	es
direction	ltr
source_version	3.0.0
translated_at	2026-06-29T00:00:00.000Z

Estados Vacío, de Carga y de Error

IDENTIFICAR: Cuándo activarse

Activar al construir CUALQUIER componente o página que:

• Obtiene datos de forma asíncrona
• Depende de contenido generado por el usuario (puede estar vacío)
• Llama a una API externa (puede fallar)
• Renderiza contenido dinámico basado en la respuesta del servidor

PATRÓN FUNDAMENTAL: Cuatro Estados, Siempre Verificados en Este Orden

if (isLoading)     → Mostrar esqueleto que coincida con la geometría del diseño
if (error)         → Mostrar mensaje de error + botón de reintentar
if (!data || data.length === 0) → Mostrar estado vacío con CTA
else               → Mostrar estado de éxito (contenido real)

EJECUTAR: Instrucciones

Paso 1: Estado de Carga: Pantallas de Esqueleto SIEMPRE, Spinners NUNCA

Las pantallas de esqueleto coinciden con la forma del diseño final:

// ✅ El esqueleto coincide con el diseño de cuadrícula de tarjetas, sin desplazamiento de diseño
function DashboardSkeleton() {
  return (
    <div className="grid gap-4 md:grid-cols-3">
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} className="h-32 rounded-lg bg-muted animate-pulse" />
      ))}
    </div>
  );
}

// Esqueleto de tabla, refleja la estructura de columnas
function TableSkeleton() {
   (
    
  );
}