Cargando

Superposición de carga a pantalla completa o local: congela la interacción del usuario durante el envío, la carga de listas, etc., y muestra un aviso de espera.

Uso básico

Uso básico

Área de la lista de obras (destino de montaje de la superposición local)

Con lock=true esta área bloquea el desplazamiento y queda inerte.

import { loading } from '@lh-ui/react'
import '@lh-ui/react/style/loading'

const handle = loading.show({ text: 'Enviando…' })
setTimeout(() => handle.close(), 1500)

// Se monta en una zona concreta en lugar de a pantalla completa
loading.show({ target: cardRef.current })

Métodos de loading

Método	Descripción	Valor de retorno
show	Muestra la superposición	{ close }
closeAll	Cierra todas las instancias activas (omitiendo la animación de salida)	void

const handle = loading.show({ target: '#card', lock: true })
handle.close()

LhLoadingOptions

Prop	Descripción	Tipo	Predeterminado
target	Destino de montaje: cadena de selector / elemento; si no se pasa, a pantalla completa	string | HTMLElement	Pantalla completa (body)
text	Texto del aviso	string	Paquete de idioma (zh-CN: 加载中…)
background	Color de fondo de la superposición (valor CSS background)	string	rgba(255,255,255,72%)
lock	Si se bloquea el desplazamiento (a pantalla completa bloquea body; con destino, bloquea el propio destino)	boolean	true

Diferencia respecto a message / notification

loading se monta en cualquier elemento destino (pantalla completa o local), por lo que no puede compartir un contenedor singleton y usa createRoot por instancia: cada instancia mantiene su propio root y sus manejadores de restauración. Si se llama a show repetidamente sobre el mismo destino, primero se desmonta la instancia anterior.

Congelación de la interacción en superposiciones locales

La superposición no a pantalla completa, además de bloquear el desplazamiento del destino, aplica inert a su contenido para congelar la interacción; al cerrar se restauran overflow / inert / position (los destinos con posicionamiento static reciben temporalmente relative).

Accesibilidad

La superposición es role="status" + aria-busy="true", el texto se anuncia como aria-label, y el icono giratorio es puramente gráfico (aria-hidden).

Importación de estilos bajo demanda

La superposición reutiliza la técnica del spinner de button (.lh-button__spinner), de modo que la página debe importar también @lh-ui/react/style/button para que exista la animación de rotación.

Estilos

import '@lh-ui/react/style/loading'