💀 Skeleton Loading Card con Astro y TailwindCSS

Efecto de carga Skeleton Screen para componentes de tarjetas, diseñado para mejorar el LCP (Largest Contentful Paint) y la experiencia de usuario. Utiliza Astro para la estructura, TailwindCSS para el diseño y JavaScript nativo para manejar el intercambio de estados de carga a contenido real.

---

🛠️ Stack Tecnológico

• Astro: Framework principal del proyecto.
• Tailwind CSS v4: Motor de diseño utilizado para el estilo oscuro, transparencias y animaciones de pulso.
• JavaScript (Vanilla): Lógica ligera para simular el tiempo de respuesta de una API y gestionar el DOM.

---

📂 Estructura del Proyecto

src/
├─ components/
│  ├─ SkeletonCard.astro
│  └─ Card.astro
├─ layouts/
│  └─ Layout.astro
├─ lib/
│  └─ data.js
└─ pages/
   └─ index.astro

Archivos principales

• SkeletonCard.astro → Contenedor con animate-pulse y colores base white/10 para simular la estructura.
• Card.astro → Componente del contenido final.
• index.astro → Contiene el script de intercambio de clases hidden tras un timeout simulado de 2.5s.

---

⚙️ Personalización

Puedes ajustar el comportamiento del cargador fácilmente.

1. Modificar el tiempo de carga

Dentro del bloque <script> en index.astro:

// Cambia 2500 por el tiempo en milisegundos deseado
setTimeout(() => {
  skeleton.classList.add("hidden");
  content.classList.remove("hidden");
}, 2500);

2. Ajustar el diseño del Skeleton

En SkeletonCard.astro, puedes cambiar la intensidad de la animación o el color de fondo:

<div class="animate-pulse bg-white/5 border border-white/10 ..."> </div>

---

🚀 Scripts Disponibles

Comandos comunes utilizando pnpm:

Comando	Acción
pnpm install	Instala todas las dependencias del proyecto
pnpm dev	Inicia el servidor de desarrollo
pnpm build	Genera la versión optimizada del sitio

---

📋 Requisitos

• Node.js (Versión 18 o superior).
• Gestor de paquetes (pnpm recomendado, npm o yarn).

---

Desarrollado con ❤️ por isnaroa