Cuando No Hay Nada que Mostrar

¿Qué pasa cuando un usuario busca servicios y nada coincide? ¿O cuando una categoría no tiene servicios aún? Mostrar una página en blanco es confuso. Los estados vacíos necesitan mensajes claros que les 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 a seguir accionables
Diseñar estados vacíos específicos según el 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?

Agrega 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 un espacio vacío.

Anatomía de un Buen Estado Vacío

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

Explicar la situación — ¿Por qué está vacío?
Ofrecer pasos a seguir — ¿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 plantea la situación con claridad. La descripción explica lo que ocurrió. El botón ofrece un camino a seguir.

Mensajes Específicos según el Contexto

Los distintos estados vacíos necesitan mensajes diferentes. 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.

Aplícalo 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}

Estiliza 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.

Probando 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

Solo Verificar 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 si hay arrays vacíos con .length, proporciona explicaciones claras y ofrece pasos accionables a seguir. Los usuarios nunca deberían ver un espacio en blanco y preguntarse si algo falló.

Puntos clave:

Verifica array.length === 0 para los estados vacíos
Explica por qué está vacío y qué pueden hacer los usuarios
Dale estilo a los estados vacíos para que se vean 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 sobre arrays.