Quando Não Há Nada para Mostrar

O que acontece quando um usuário pesquisa por serviços e nada corresponde? Ou quando uma categoria ainda não tem serviços? Exibir uma página em branco é confuso. Estados vazios precisam de mensagens claras que informem os usuários o que está acontecendo e o que eles podem fazer a respeito.

O Que Você Vai Aprender

Detectar estados de dados vazios
Exibir mensagens úteis de "sem resultados"
Fornecer próximos passos acionáveis
Projetar estados vazios específicos para cada contexto

O Problema

Imagine a página de serviços sem nenhum serviço:

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

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

A página renderiza apenas com "Nossos Serviços" e um <ul> vazio. Os usuários veem uma área em branco e se perguntam se algo quebrou. A página está carregando? Há um erro? Eles fizeram algo errado?

Adicionar um Estado Vazio

Usando o padrão {#if} / {:else} da lição anterior, verifique se os dados estão vazios e exiba uma mensagem ú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}

Agora os usuários veem uma mensagem clara em vez de um espaço vazio.

Anatomia de um Bom Estado Vazio

Um bom estado vazio faz mais do que dizer "nada aqui." Ele deve:

Explicar a situação — Por que está vazio?
Oferecer próximos passos — O que o usuário pode fazer?
Parecer intencional — Projetado, não quebrado

{#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}

O ícone sinaliza intenção. O título descreve a situação claramente. A descrição explica o que aconteceu. O botão oferece um caminho a seguir.

Mensagens Específicas por Contexto

Diferentes estados vazios precisam de mensagens diferentes. Considere o contexto:

Carregamento inicial (nenhum serviço existe ainda):

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

Pesquisa sem 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>

Categoria filtrada está vazia:

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

Usuário não tem 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 mensagem é específica para a situação e fornece uma ação relevante.

Aplicar à Página de Serviços do BookIt

Atualize a página de serviços para lidar com o caso vazio:

<!-- 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 o Estado Vazio

Adicione CSS para fazer os estados vazios parecerem projetados e intencionais:

<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últiplos Cenários de Estado Vazio

Uma única página pode ter diferentes cenários de estado vazio. Use {:else if} para tratá-los:

<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}

A ordem importa — verifique as condições mais específicas primeiro.

Testando Estados Vazios

Para testar, esvazie temporariamente o array de serviços:

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

Verifique se o estado vazio é exibido corretamente, depois restaure seus dados. Considere manter uma forma de acionar estados vazios durante o desenvolvimento para iteração de design.

Erros Comuns

Verificar Apenas a Veracidade

<!-- ❌ 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}

Mensagens Genéricas

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

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

Esquecer o Estado Vazio Completamente

Muitos desenvolvedores pulam os estados vazios durante o desenvolvimento inicial. Adicione-os desde o início — eles fazem parte da experiência completa do usuário. Um aplicativo sem estados vazios parece inacabado.

Sem Chamada para Ação

<!-- ❌ 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>

Resumo

Estados vazios merecem um design cuidadoso. Verifique arrays vazios com .length, forneça explicações claras e ofereça próximos passos acionáveis. Os usuários nunca devem ver um vazio em branco e se perguntar se algo quebrou.

Principais conclusões:

Verifique array.length === 0 para estados vazios
Explique por que está vazio e o que os usuários podem fazer
Estilize estados vazios para parecerem intencionais, não quebrados
Forneça mensagens específicas ao contexto para diferentes cenários

Próximos Passos

Você pode mostrar, ocultar e lidar com estados vazios. Mas e quanto à renderização de muitos itens? Continue com Renderizar Lista de Serviços com {#each} para iterar sobre arrays.