fix(ui): uniformar vacíos y esqueletos del panel

Cada vista tenía su propio vacío: texto suelto sin icono o una
tarjeta discontinua dentro de la tabla. Ahora hay uno solo, con
icono, descripción y acción cuando procede, sin marco doble.

Los esqueletos repiten la forma real (alto de línea, rótulos,
pestañas y contadores) y la barra de scroll queda reservada:
al llegar los datos la página ya no salta.

Author: abitech-dev

src/components/bloque.tsx

@@ -1,8 +1,6 @@
-import { ChevronRightIcon, PlusIcon } from 'lucide-react'
+import { ChevronRightIcon } from 'lucide-react'
 import { Link } from 'react-router'
 
-import { Button } from '@/components/ui/button'
-
 /** Bloque de una pantalla de resumen: rótulo, acción y marco. Lo comparten
  *  servidores, credenciales y créditos. */
 export function Bloque({
@@ -56,26 +54,3 @@ export function VerTodo({
     </button>
   )
 }
-
-export function VacioDeBloque({
-  texto,
-  accion,
-  onAccion,
-}: {
-  texto: string
-  accion: string
-  /** Sin manejador, solo el texto: no se ofrece un alta que daria 403. */
-  onAccion?: () => void
-}) {
-  return (
-    <div className="flex flex-col items-start gap-3 p-4">
-      <p className="text-muted-foreground text-sm">{texto}</p>
-      {onAccion && (
-        <Button variant="outline" size="sm" onClick={onAccion}>
-          <PlusIcon />
-          {accion}
-        </Button>
-      )}
-    </div>
-  )
-}

src/components/data-table.tsx

@@ -2,6 +2,7 @@ import { cn } from 'cn'
 import { AlertTriangleIcon, RefreshCwIcon } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
+import { LineaEsqueleto } from '@/components/states'
 import { Skeleton } from '@/components/ui/skeleton'
 import {
   Table,
@@ -65,7 +66,7 @@ interface Props<T> {
   cargando: boolean
   error?: unknown
   onReintentar?: () => void
-  /** Segun la causa: no tener nada no es lo mismo que no encontrar. */
+  /** `EmptyState` sin marco; distinto sin datos que sin coincidencias. */
   vacio: React.ReactNode
   /** Filas del esqueleto: las de la carga anterior o la pagina entera. */
   filasEsperadas?: number
@@ -134,7 +135,7 @@ export function DataTable<T>({
               </TableRow>
             ) : datos.length === 0 ? (
               <TableRow className="hover:bg-transparent">
-                <TableCell colSpan={columnas.length} className="py-12 text-center">
+                <TableCell colSpan={columnas.length} className="p-0">
                   {vacio}
                 </TableCell>
               </TableRow>
@@ -167,23 +168,15 @@ export function DataTable<T>({
         {cargando ? (
           <ul className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
             {Array.from({ length: Math.min(huesos, 6) }, (_, indice) => (
-              <li key={indice} className="rounded-lg border p-4">
-                <Skeleton className="h-5 w-2/5" />
-                <div className="mt-4 grid grid-cols-2 gap-3">
-                  <Skeleton className="h-4 w-full" />
-                  <Skeleton className="h-4 w-2/3" />
-                  <Skeleton className="h-4 w-3/4" />
-                  <Skeleton className="h-4 w-1/2" />
-                </div>
-              </li>
+              <TarjetaEsqueleto key={indice} columnas={columnas} />
             ))}
           </ul>
         ) : error ? (
           <div className="rounded-lg border p-4">
             <AvisoDeError error={error} onReintentar={onReintentar} />
           </div>
         ) : datos.length === 0 ? (
-          <div className="rounded-lg border px-6 py-12 text-center">{vacio}</div>
+          <div className="rounded-lg border">{vacio}</div>
         ) : (
           <ul className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
             {datos.map((fila, indice) => (
@@ -241,6 +234,32 @@ function TarjetaDeFila<T>({
   )
 }
 
+/** Forma de `TarjetaDeFila`: sin salto al cargar. */
+function TarjetaEsqueleto<T>({ columnas }: { columnas: Columna<T>[] }) {
+  const titulo = columnas.find((columna) => columna.rol === 'titulo') ?? columnas[0]
+  const resto = columnas.filter(
+    (columna) => columna !== titulo && columna.rol !== 'acciones',
+  )
+
+  return (
+    <li className="rounded-lg border p-4" aria-hidden>
+      <LineaEsqueleto className="w-2/5" />
+      <dl className="mt-4 grid grid-cols-2 gap-x-4 gap-y-3">
+        {resto.map((columna) => (
+          <div key={columna.key}>
+            <dt className="text-muted-foreground text-[11px] tracking-[0.12em] uppercase">
+              {columna.header}
+            </dt>
+            <dd className="mt-1">
+              <LineaEsqueleto className="w-3/4" />
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </li>
+  )
+}
+
 function CeldaEsqueleto<T>({ columna }: { columna: Columna<T> }) {
   if (columna.rol === 'acciones') {
     return (

src/components/states.tsx

@@ -30,31 +30,56 @@ export function PageHeader({ title, description, action }: PageHeaderProps) {
 interface EmptyStateProps {
   icon: React.ElementType
   title: string
-  description: string
+  description?: string
   action?: React.ReactNode
+  /** Suelto en página; tabla o tarjeta ya ponen marco. */
+  enmarcado?: boolean
+  /** Paneles pequeños: menos aire. */
+  compacto?: boolean
   className?: string
 }
 
+/** Vacío único de la app: todos iguales. */
 export function EmptyState({
   icon: Icon,
   title,
   description,
   action,
+  enmarcado = false,
+  compacto = false,
   className,
 }: EmptyStateProps) {
   return (
     <div
       className={cn(
-        'border-border/70 flex flex-col items-center rounded-lg border border-dashed px-6 py-14 text-center',
+        'flex flex-col items-center text-center whitespace-normal',
+        compacto ? 'px-4 py-8' : 'px-6 py-12',
+        enmarcado && 'rounded-lg border',
         className,
       )}
     >
-      <span className="bg-muted text-muted-foreground grid size-11 place-items-center rounded-full">
-        <Icon className="size-5" />
+      <span
+        className={cn(
+          'bg-muted text-muted-foreground grid place-items-center rounded-full',
+          compacto ? 'size-9' : 'size-11',
+        )}
+      >
+        <Icon className={compacto ? 'size-4' : 'size-5'} />
       </span>
-      <h2 className="mt-4 text-base font-semibold">{title}</h2>
-      <p className="text-muted-foreground mt-1 max-w-sm text-sm">{description}</p>
-      {action && <div className="mt-5">{action}</div>}
+      <h2 className={cn('font-semibold', compacto ? 'mt-3 text-sm' : 'mt-4 text-base')}>
+        {title}
+      </h2>
+      {description && (
+        <p
+          className={cn(
+            'text-muted-foreground mt-1 max-w-sm text-pretty',
+            compacto ? 'text-xs' : 'text-sm',
+          )}
+        >
+          {description}
+        </p>
+      )}
+      {action && <div className={compacto ? 'mt-4' : 'mt-5'}>{action}</div>}
     </div>
   )
 }
@@ -84,6 +109,47 @@ export function ErrorState({ error, onRetry }: ErrorStateProps) {
   )
 }
 
+const ALTO_DE_LINEA = {
+  xs: ['h-4', 'h-3'],
+  sm: ['h-5', 'h-4'],
+  base: ['h-6', 'h-4'],
+  xl: ['h-7', 'h-5'],
+  '2xl': ['h-8', 'h-7'],
+} as const
+
+/** Alto de línea del texto real: sin salto al cargar. */
+export function LineaEsqueleto({
+  texto = 'sm',
+  className,
+}: {
+  texto?: keyof typeof ALTO_DE_LINEA
+  className?: string
+}) {
+  const [linea, barra] = ALTO_DE_LINEA[texto]
+
+  return (
+    <div className={cn('flex items-center', linea)}>
+      <Skeleton className={cn(barra, className)} />
+    </div>
+  )
+}
+
+export function ListaEsqueleto({ filas = 3 }: { filas?: number }) {
+  return (
+    <ul className="divide-y rounded-lg border" aria-hidden>
+      {Array.from({ length: filas }, (_, indice) => (
+        <li key={indice} className="flex items-center gap-3 p-4">
+          <Skeleton className="size-4 shrink-0" />
+          <div className="min-w-0 flex-1">
+            <LineaEsqueleto className="w-32" />
+            <LineaEsqueleto texto="xs" className="w-56 max-w-full" />
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
 /** Imita la forma de la tabla para que la vista no salte al cargar. */
 export function TableSkeleton({
   rows = 4,

src/components/tab-nav.tsx

@@ -2,11 +2,15 @@ import { NavLink } from 'react-router'
 
 import { cn } from 'cn'
 
+import { Skeleton } from '@/components/ui/skeleton'
+
 export interface Pestana {
   to: string
   etiqueta: string
   /** Lo que hay dentro, cuando ahorra entrar a mirarlo. */
   cuenta?: number | null
+  /** Cuenta en camino: hueco reservado, sin salto. */
+  cuentaPendiente?: boolean
   /** La pestaña índice necesita `end`, o queda activa en todas las hijas. */
   end?: boolean
 }
@@ -38,10 +42,14 @@ export function TabNav({
               }
             >
               {pestana.etiqueta}
-              {pestana.cuenta != null && (
-                <span className="bg-muted text-muted-foreground rounded-full px-1.5 py-0.5 text-xs tabular-nums">
-                  {pestana.cuenta}
-                </span>
+              {pestana.cuentaPendiente ? (
+                <Skeleton className="h-5 w-5 rounded-full" />
+              ) : (
+                pestana.cuenta != null && (
+                  <span className="bg-muted text-muted-foreground rounded-full px-1.5 py-0.5 text-xs tabular-nums">
+                    {pestana.cuenta}
+                  </span>
+                )
               )}
             </NavLink>
           </li>

src/features/access/GroupAccessDialog.tsx

@@ -1,9 +1,10 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { CalendarClockIcon, PlusIcon, XIcon } from 'lucide-react'
+import { CalendarClockIcon, PlusIcon, ServerIcon, XIcon } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { FormDialogContent } from '@/components/form-dialog'
+import { EmptyState } from '@/components/states'
 import { Button } from '@/components/ui/button'
 import {
   Dialog,
@@ -51,9 +52,12 @@ export function GroupAccessDialog({ slug, grupo, concesiones, onOpenChange }: Pr
 
         <div className="divide-y rounded-lg border">
           {concesiones.length === 0 ? (
-            <p className="text-muted-foreground p-3 text-sm">
-              Todavía no alcanza ningún servidor.
-            </p>
+            <EmptyState
+              compacto
+              icon={ServerIcon}
+              title="Sin accesos todavía"
+              description="Todavía no alcanza ningún servidor."
+            />
           ) : (
             concesiones.map((concesion) => (
               <Concesion key={concesion.id} slug={slug} concesion={concesion} />

src/features/access/GroupRow.tsx

@@ -221,6 +221,7 @@ function Personas({
 
       {grupo.members.length === 0 ? (
         <EmptyState
+          compacto
           icon={UsersIcon}
           title="Todavía no hay nadie aquí"
           description={descripcionDelVacio(administra, fuera.length)}

src/features/access/GroupsTab.tsx

@@ -5,9 +5,8 @@ import { useOutletContext } from 'react-router'
 import { toast } from 'sonner'
 
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { EmptyState } from '@/components/states'
+import { EmptyState, ListaEsqueleto } from '@/components/states'
 import { Button } from '@/components/ui/button'
-import { Skeleton } from '@/components/ui/skeleton'
 import * as accessApi from '@/features/access/api'
 import { GroupAccessDialog } from '@/features/access/GroupAccessDialog'
 import { GroupNameDialog } from '@/features/access/GroupNameDialog'
@@ -51,8 +50,6 @@ export function GroupsTab() {
   const porGrupo = (grupo: AccessGroup) =>
     (concesiones.data ?? []).filter((concesion) => concesion.group === grupo.id)
 
-  if (grupos.isPending) return <Skeleton className="h-40 rounded-lg" />
-
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between gap-3">
@@ -67,8 +64,11 @@ export function GroupsTab() {
         )}
       </div>
 
-      {lista.length === 0 ? (
+      {grupos.isPending ? (
+        <ListaEsqueleto filas={2} />
+      ) : lista.length === 0 ? (
         <EmptyState
+          enmarcado
           icon={UsersIcon}
           title="Todavía no hay grupos"
           description="Sirven para dar el mismo acceso a varias personas de una vez."

src/features/access/MemberAccessSheet.tsx

@@ -75,6 +75,7 @@ export function MemberAccessSheet({ slug, miembro, open, onOpenChange }: Props)
             </p>
           ) : consulta.data.servers.length === 0 ? (
             <EmptyState
+              enmarcado
               icon={ServerIcon}
               title="No entra a ningún servidor"
               description="Dele toda la organización arriba, o compártale un servidor desde su ficha."

src/features/access/ServerAccess.tsx

@@ -15,6 +15,7 @@ import { toast } from 'sonner'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { FieldError } from '@/components/field-error'
 import { InfoHint } from '@/components/info-hint'
+import { EmptyState } from '@/components/states'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -122,12 +123,18 @@ export function ServerAccess({
 
         <Bloque titulo="Con acceso concedido">
           {concesiones.length === 0 ? (
-            <p className="text-muted-foreground p-3 text-sm">
-              {credencial
-                ? 'Todavía no entra nadie más con esta credencial.'
-                : 'Todavía no entra nadie más a este servidor.'}
-              {puedeRepartir && !conFormulario && ' Use «Compartir» para dar acceso.'}
-            </p>
+            <EmptyState
+              compacto
+              icon={UsersIcon}
+              title="Nadie más entra todavía"
+              description={
+                puedeRepartir && !conFormulario
+                  ? 'Use «Compartir» para dar acceso a alguien del equipo.'
+                  : credencial
+                    ? 'Solo quien administra usa esta credencial.'
+                    : 'Solo quien administra entra a este servidor.'
+              }
+            />
           ) : (
             concesiones.map((concesion) => (
               <GrantRow