Todos los componentes (244)

Estado del guardado

Gestión · AutosaveIndicator

Qué es y cuándo usarlo

Dice en qué punto está el guardado automático: sin cambios, cambios sin guardar, guardando, guardado (con la hora) o fallo (con un botón para reintentar). Va junto a el gancho useAutosave, que es quien guarda.

Cuándo usarlo

Un formulario largo, un editor o un borrador que se guarda solo mientras se escribe.
useAutosave({ value, onSave }) vigila el valor y, cuando deja de cambiar (1,5 s por defecto), lo guarda. Devuelve status, savedAt, error y saveNow(); se las pasas a este indicador.
Guarda de uno en uno: si el valor cambia mientras se guarda, al terminar guarda el nuevo.
Un fallo no se pierde ni se reintenta en bucle: queda en error hasta que el valor cambie o se llame a saveNow.
Mientras hay cambios sin guardar, el navegador avisa al intentar cerrar la pestaña (warnOnLeave).

Cuándo no

Un guardado que el usuario decide con un botón: el botón ya dice «Guardando…».
El guardado no es una garantía: onSave es tu función, y el servidor decide si lo acepta.

Teclado: el único control es «Reintentar», un botón normal.

Accesibilidad: es una región de estado (role="status"), así que el lector de pantalla anuncia cada cambio sin mover el foco; el fallo lleva texto además del color. La hora se escribe en el navegador y no en el servidor.

Aspecto fino: texto apagado; el fallo, en el tono de error.

Cómo se ve

Guardado

<AutosaveIndicator
  status={guardado.status}
  savedAt={guardado.savedAt}
  onRetry={guardado.saveNow}
/>

Props

Se importa con import { AutosaveIndicator } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`status`obligatoria	`AutosaveStatus`	En que punto esta el guardado: lo que devuelve `useAutosave`.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`onRetry`	`() => void \| Promise<void>`	Reintentar tras un fallo: sale el boton solo en `error`.
`savedAt`	`Date \| null`	Cuando se guardo por ultima vez: se escribe «Guardado a las 10:32».

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: