Chargement
Masque de chargement plein écran ou local : fige les interactions utilisateur lors d'un envoi, du chargement d'une liste, etc., et affiche un indicateur d'attente.
Utilisation de base
Zone de la liste des œuvres (cible de montage de la superposition locale)
Avec lock=true, cette zone verrouille le défilement et devient inerte.
import { loading } from '@lh-ui/react'
import '@lh-ui/react/style/loading'
const handle = loading.show({ text: 'Envoi en cours…' })
setTimeout(() => handle.close(), 1500)
// Attacher à une zone spécifique plutôt qu'en plein écran
loading.show({ target: cardRef.current })
Méthodes de loading
| Méthode | Description | Valeur de retour |
|---|---|---|
| show | Afficher le masque | { close } |
| closeAll | Fermer toutes les instances actives (sans l'animation de sortie) | void |
const handle = loading.show({ target: '#card', lock: true })
handle.close()
LhLoadingOptions
| Prop | Description | Type | Valeur par défaut |
|---|---|---|---|
| target | Cible de montage : sélecteur ou élément ; plein écran en son absence | string | HTMLElement | Plein écran (body) |
| text | Texte d'indication | string | Pack de langue (zh-CN : 加载中…) |
| background | Couleur de fond du masque (valeur CSS background) | string | rgba(255,255,255,72%) |
| lock | Verrouiller ou non le défilement (plein écran verrouille body ; cible spécifique verrouille la cible elle-même) | boolean | true |
loading s'attache à un élément cible quelconque (plein écran ou local) et ne peut pas partager un conteneur singleton : il passe donc par un
createRoot par instance : chaque instance détient sa propre racine et ses descripteurs de restauration. Un nouvel appel à show sur une même cible démonte d'abord l'instance précédente.
Outre le verrouillage du défilement de la cible, un masque non plein écran applique inert à la cible pour geler les interactions de son contenu ; à la fermeture,
overflow / inert / position sont restaurés automatiquement (les cibles en positionnement static reçoivent temporairement relative).
Le masque possède role="status" + aria-busy="true", et son texte est annoncé via aria-label ;
l'icône rotative est un graphique décoratif (aria-hidden).
Le masque réutilise le tracé du spinner de button (.lh-button__spinner) : la page doit également importer
@lh-ui/react/style/button pour bénéficier de l'animation de rotation.
Styles
import '@lh-ui/react/style/loading'