VIA Components Library

Reusable Empty States & Loading Skeletons for VIA Platform

Empty States

Use these when lists, tables, or sections have no data to display.

No Convoys Found

🚛
No hay convoys activos
Comienza creando tu primer convoy para rastrear camiones en ruta a Manzanillo. 
<div class="via-empty-state">
  <div class="via-empty-icon">🚛</div>
  <div class="via-empty-title">No hay convoys activos</div>
  <div class="via-empty-description">...</div>
  <button class="via-empty-action">
    Crear Nuevo Convoy
  </button>
</div>

No Terminals Registered

🏗️
No hay terminales registradas
Registra terminales portuarias para gestionar secuencias de carga.

No Search Results

🔍
No se encontraron resultados
Intenta con otros términos de búsqueda o ajusta los filtros aplicados.

No Notifications

🔔
No hay notificaciones
Estás al día. Te avisaremos cuando haya actualizaciones importantes.

No Drivers Available

👤
No hay conductores disponibles
Registra conductores con licencias vigentes para asignarlos a convoys.

Access Denied

🔒
Acceso restringido
No tienes permisos para ver esta sección. Contacta a tu administrador.

Error Loading Data

⚠️
Error al cargar datos
No pudimos conectar con el servidor. Por favor intenta de nuevo.

Coming Soon

🚧
Próximamente
Estamos trabajando en esta función. Estará disponible en las próximas semanas.

Loading Skeletons

Use these while data is loading to improve perceived performance.

Card Loading 

<div class="via-skeleton-card">
  <div class="via-skeleton via-skeleton-circle"
       style="width: 48px; height: 48px;"></div>
  <div class="via-skeleton via-skeleton-text lg"></div>
  <div class="via-skeleton via-skeleton-text"></div>
</div>

Table Loading

List Loading

KPI Card Loading

Implementation Guide

How to integrate these components into your VIA pages.

1. Include the CSS 

<link rel="stylesheet" href="via-components.css">

2. Show skeleton while loading 

<div id="convoyList">
  <!-- Show skeleton initially -->
  <div class="via-skeleton-card">
    <div class="via-skeleton via-skeleton-text lg"></div>
    <div class="via-skeleton via-skeleton-text"></div>
  </div>
</div>

<script>
// Fetch data
fetch('/api/convoys')
  .then(res => res.json())
  .then(data => {
    // Replace skeleton with real data
    document.getElementById('convoyList').innerHTML =
      renderConvoys(data);
  });
</script>

3. Show empty state when no data 

<script>
fetch('/api/convoys')
  .then(res => res.json())
  .then(data => {
    const container = document.getElementById('convoyList');

    if (data.length === 0) {
      // Show empty state
      container.innerHTML = `
        <div class="via-empty-state">
          <div class="via-empty-icon">🚛</div>
          <div class="via-empty-title">No hay convoys activos</div>
          <div class="via-empty-description">
            Comienza creando tu primer convoy.
          </div>
          <button class="via-empty-action">
            Crear Nuevo Convoy
          </button>
        </div>
      `;
    } else {
      // Render data
      container.innerHTML = renderConvoys(data);
    }
  })
  .catch(error => {
    // Show error state
    container.innerHTML = `
      <div class="via-empty-state">
        <div class="via-empty-icon">⚠️</div>
        <div class="via-empty-title">Error al cargar datos</div>
        <button class="via-empty-action" onclick="location.reload()">
          Reintentar
        </button>
      </div>
    `;
  });
</script>