Cuando No Hay Nada que Mostrar

¿Qué pasa cuando un usuario busca servicios y no hay coincidencias? ¿O cuando una categoría aún no tiene servicios? Mostrar una página en blanco es confuso. Los estados vacíos necesitan mensajes claros que le indiquen a los usuarios qué está pasando y qué pueden hacer al respecto.

Lo que Aprenderás

Detectar estados de datos vacíos
Mostrar mensajes útiles de "sin resultados"
Proporcionar pasos siguientes accionables
Diseñar estados vacíos específicos al contexto

El Problema

Imagina la página de servicios sin ningún servicio:

<script>
  const services = []; // Empty!
</script>

<h1>Our Services</h1>
<ul>
  {#each services as service}
    <li>{service.name}</li>
  {/each}
</ul>

La página se renderiza con solo "Nuestros Servicios" y un <ul> vacío. Los usuarios ven un área en blanco y se preguntan si algo falló. ¿Está cargando la página? ¿Hay un error? ¿Hicieron algo mal?

Agregar un Estado Vacío

Usando el patrón {#if} / {:else} de la lección anterior, verifica si los datos están vacíos y muestra un mensaje útil:

<script>
  const services = [];
</script>

<h1>Our Services</h1>

{#if services.length === 0}
  <div class="empty-state">
    <p>No services available at the moment.</p>
    <p>Please check back soon!</p>
  </div>
{:else}
  <ul>
    {#each services as service}
      <li>{service.name}</li>
    {/each}
  </ul>
{/if}

Ahora los usuarios ven un mensaje claro en lugar de vacío.

Anatomía de un Buen Estado Vacío

Un buen estado vacío hace más que decir "no hay nada aquí." Debería:

Explicar la situación — ¿Por qué está vacío?
Ofrecer pasos siguientes — ¿Qué puede hacer el usuario?
Sentirse intencional — Diseñado, no roto

{#if services.length === 0}
  <div class="empty-state">
    <span class="empty-icon">🔍</span>
    <h2>No Services Found</h2>
    <p>We couldn't find any services matching your criteria.</p>
    <p>Try adjusting your filters or browse all services.</p>
    <a href="/services" class="button">View All Services</a>
  </div>
{:else}
  <!-- service list -->
{/if}

El ícono señala intención. El encabezado describe la situación con claridad. La descripción explica lo que ocurrió. El botón ofrece una forma de avanzar.

Mensajes Específicos al Contexto

Diferentes estados vacíos necesitan diferentes mensajes. Considera el contexto:

Carga inicial (aún no existen servicios):

<div class="empty-state">
  <h2>Coming Soon</h2>
  <p>We're adding new services every week. Check back soon!</p>
</div>

Búsqueda sin resultados:

<div class="empty-state">
  <h2>No Results for "{searchQuery}"</h2>
  <p>Try a different search term or browse our categories.</p>
  <button onclick={() => searchQuery = ''}>Clear Search</button>
</div>

La categoría filtrada está vacía:

<div class="empty-state">
  <h2>No {categoryName} Services</h2>
  <p>This category is currently empty.</p>
  <a href="/services">Browse all services</a>
</div>

El usuario no tiene reservas:

<div class="empty-state">
  <h2>No Bookings Yet</h2>
  <p>Ready to book your first service?</p>
  <a href="/services">Browse Services</a>
</div>

Cada mensaje es específico a la situación y proporciona una acción relevante.

Aplicar a la Página de Servicios de BookIt

Actualiza la página de servicios para manejar el caso vacío:

<!-- filename: src/routes/services/+page.svelte -->
<script>
  const services = [
    {
      id: '1',
      slug: 'lawn-mowing',
      name: 'Lawn Mowing',
      description: 'Professional lawn mowing service.',
      price: 50,
      duration: 60
    },
    // ... more services
  ];
</script>

<h1>Our Services</h1>
<p>Browse our available services and book your appointment.</p>

{#if services.length === 0}
  <div class="empty-state">
    <h2>No Services Available</h2>
    <p>We're currently updating our service offerings.</p>
    <p>Please check back soon or contact us for custom requests.</p>
    <a href="/contact">Contact Us</a>
  </div>
{:else}
  <ul class="services-list">
    {#each services as service}
      <li class="service-item">
        <h2><a href="/services/{service.slug}">{service.name}</a></h2>
        <p>{service.description}</p>
        <p><strong>${service.price}</strong> · {service.duration} minutes</p>
      </li>
    {/each}
  </ul>
{/if}

Estilizar el Estado Vacío

Agrega CSS para que los estados vacíos se sientan diseñados e intencionales:

<style>
  .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 2rem 0;
  }
  
  .empty-state h2 {
    margin: 0 0 0.5rem 0;
    color: #333;
  }
  
  .empty-state p {
    color: #666;
    margin: 0.5rem 0;
  }
  
  .empty-state a,
  .empty-state button {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: #007bff;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .empty-state a:hover,
  .empty-state button:hover {
    background: #0056b3;
  }
  
  .empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
  }
</style>

Múltiples Escenarios de Estado Vacío

Una sola página puede tener diferentes escenarios de estado vacío. Usa {:else if} para manejarlos:

<script>
  let services = $state([]);
  let searchQuery = $state('');
  let selectedCategory = $state('all');
  let isLoading = $state(false);
  let error = $state(null);
</script>

{#if isLoading}
  <div class="loading-state">
    <p>Loading services...</p>
  </div>
{:else if error}
  <div class="error-state">
    <h2>Something Went Wrong</h2>
    <p>{error.message}</p>
    <button onclick={retry}>Try Again</button>
  </div>
{:else if services.length === 0 && searchQuery}
  <div class="empty-state">
    <h2>No Results for "{searchQuery}"</h2>
    <p>Try a different search term.</p>
    <button onclick={() => searchQuery = ''}>Clear Search</button>
  </div>
{:else if services.length === 0 && selectedCategory !== 'all'}
  <div class="empty-state">
    <h2>No Services in This Category</h2>
    <button onclick={() => selectedCategory = 'all'}>View All</button>
  </div>
{:else if services.length === 0}
  <div class="empty-state">
    <h2>No Services Available</h2>
    <p>Check back soon!</p>
  </div>
{:else}
  <!-- Render services -->
{/if}

El orden importa — verifica primero las condiciones más específicas.

Probar los Estados Vacíos

Para probar, vacía temporalmente el arreglo de servicios:

<script>
  const services = []; // Temporarily empty for testing
</script>

Verifica que el estado vacío se muestre correctamente, luego restaura tus datos. Considera mantener una forma de activar los estados vacíos durante el desarrollo para iterar en el diseño.

Errores Comunes

Verificar Solo la Veracidad

<!-- ❌ Empty array is truthy -->
{#if services}
  {#each services as service}...{/each}
{/if}

<!-- ✅ Check length explicitly -->
{#if services.length > 0}
  {#each services as service}...{/each}
{/if}

Mensajes Genéricos

<!-- ❌ Not helpful -->
<p>No data.</p>

<!-- ✅ Specific and actionable -->
<p>No services found. Try adjusting your search or browse all categories.</p>

Olvidar el Estado Vacío por Completo

Muchos desarrolladores omiten los estados vacíos durante el desarrollo inicial. Agrégalos desde el principio — son parte de la experiencia de usuario completa. Una aplicación sin estados vacíos se siente incompleta.

Sin Llamada a la Acción

<!-- ❌ Dead end -->
<div class="empty-state">
  <p>No bookings found.</p>
</div>

<!-- ✅ Gives user a path forward -->
<div class="empty-state">
  <p>No bookings found.</p>
  <a href="/services">Book your first service</a>
</div>

Resumen

Los estados vacíos merecen un diseño cuidadoso. Verifica arrays vacíos con .length, proporciona explicaciones claras y ofrece próximos pasos accionables. Los usuarios nunca deberían ver un vacío en blanco y preguntarse si algo se rompió.

Puntos clave:

Verifica array.length === 0 para estados vacíos
Explica por qué está vacío y qué pueden hacer los usuarios
Estiliza los estados vacíos para que se sientan intencionales, no rotos
Proporciona mensajes específicos al contexto para diferentes escenarios

Próximos Pasos

Puedes mostrar, ocultar y manejar estados vacíos. ¿Pero qué hay de renderizar muchos elementos? Continúa con Renderizar Lista de Servicios con {#each} para iterar a través de arrays.