Transiciones en navegación, pestañas y filtros

Las transiciones no son un adorno que se aplica a mano de vez en cuando: son la columna vertebral de dos de las interacciones más frecuentes de cualquier aplicación, navegar entre rutas y refinar una vista con pestañas o filtros. El router de Solid ya envuelve cada navegación en una transición sin que hagas nada, así que la página anterior no parpadea mientras la nueva carga sus datos. Y del lado del estado local, cualquier cambio que altere la fuente de un recurso hereda el mismo cero parpadeo con solo envolverlo en startTransition. Esta lección conecta la primitiva con los sitios donde de verdad la vas a usar.

El router ya usa transiciones

Cuando navegas con @solidjs/router, el cambio de ruta ocurre dentro de una transición de forma automática. Si la ruta destino lee datos que aún se están buscando —con createAsync, con una función load, o con cualquier recurso—, el router mantiene la ruta actual en pantalla hasta que esos datos resuelven, y entonces conmuta de golpe. No tienes que envolver nada: la navegación es la transición. Esto explica por qué, en una app con router bien montada, pasar de una página a otra no parpadea aunque cada página cargue lo suyo.

import { createAsync, useParams } from "@solidjs/router";

function Articulo() {
  const params = useParams();
  const articulo = createAsync(() => obtenerArticulo(params.id));
  // Al navegar aquí, la página anterior permanece visible
  // mientras esta promesa resuelve; luego se conmuta entera
  return (
    <Suspense fallback={<Skeleton />}>
      <Vista datos={articulo()} />
    </Suspense>
  );
}

Esto reordena una intuición que muchos traen de otros frameworks, donde navegar significa desmontar la pantalla actual y montar la siguiente con su propio spinner. En Solid la pantalla actual es una verdad que se conserva hasta que la siguiente está lista, exactamente igual que en cualquier otra transición. La navegación no es un caso especial: es la aplicación más visible del mismo mecanismo que ya conoces.

useIsRouting: el pending de la navegación

Igual que useTransition te da un pending local, el router te da useIsRouting: un signal booleano que es true mientras una navegación está en vuelo. Es la pieza para una barra de progreso global —esa línea fina que corre por el borde superior de tantas aplicaciones— sin acoplarla a ninguna ruta concreta.

import { useIsRouting } from "@solidjs/router";

function ProgresoNavegacion() {
  const enRuta = useIsRouting();
  return (
    <div
      class="barra-navegacion"
      classList={{ activa: enRuta() }}
      aria-hidden="true"
    />
  );
}

Colócalo una sola vez, alto en el árbol, fuera del <Routes>, y anunciará cualquier navegación de la aplicación. Es la contrapartida global de los indicadores sutiles de la lección anterior: mismo principio —anotar, no reemplazar—, pero para el nivel de la ruta entera en vez del de un bloque local. Y como la página vieja sigue montada, el usuario puede seguir leyéndola —o incluso cancelar la navegación yendo a otro sitio— mientras la línea corre.

flowchart LR
N[clic en enlace] -->|router envuelve en transicion| L[carga datos de la ruta nueva]
L -->|useIsRouting true| P[pagina vieja sigue visible]
P -->|datos listos| C[commit de la ruta nueva]
style P fill:#f9e2af,color:#11111b
style C fill:#a6e3a1,color:#11111b

Filtros y pestañas: transiciones que tú disparas

El router te da las transiciones gratis en la navegación, pero muchos cambios de vista no cruzan rutas: refinar un catálogo con un filtro, cambiar de pestaña, reordenar una tabla. Si esos controles alteran un signal que es la fuente de un createResource, el recurso refetchea y —sin transición— el <Suspense> parpadea. La solución es la misma primitiva, disparada a mano: envuelve la escritura del signal en startTransition.

import { createResource, createSignal, startTransition, Suspense } from "solid-js";

function Catalogo() {
  const [filtro, setFiltro] = createSignal("todos");
  const [productos] = createResource(filtro, buscarProductos);

  const cambiar = (f: string) => startTransition(() => setFiltro(f));

  return (
    <>
      <Filtros onPick={cambiar} />
      <Suspense fallback={<Skeleton />}>
        <Rejilla items={productos()} />
      </Suspense>
    </>
  );
}

Si además quieres atenuar la rejilla mientras el filtro nuevo carga, cambia startTransition por useTransition y usa su pending:

function CatalogoAtenuado() {
  const [filtro, setFiltro] = createSignal("todos");
  const [pending, start] = useTransition();
  const [productos] = createResource(filtro, buscarProductos);

  return (
    <>
      <Filtros onPick={(f) => start(() => setFiltro(f))} />
      <Suspense fallback={<Skeleton />}>
        <Rejilla items={productos()} classList={{ atenuado: pending() }} />
      </Suspense>
    </>
  );
}

El patrón se repite idéntico para pestañas —el signal es la pestaña activa— y para ordenación —el signal es el criterio—. La regla mental es simple: cualquier signal que sea fuente de un recurso y lo cambie el usuario merece un startTransition. Ese es el punto exacto donde una interfaz pasa de parpadear a fluir.

import { query } from "@solidjs/router";

const obtenerArticulo = query(async (id: string) => {
  return fetch(`/api/articulo/${id}`).then((r) => r.json());
}, "articulo");

// En la definición de la ruta: se dispara al hover/focus del enlace
// preload: ({ params }) => obtenerArticulo(params.id)