Загрузка

Полноэкранная или локальная маска загрузки: фиксирует взаимодействие пользователя и показывает уведомление об ожидании для сценариев вроде отправки данных или загрузки списка.

Базовое использование

Базовое использование

Область списка работ (цель монтирования локального слоя)

При lock=true прокрутка в этой области блокируется, а взаимодействия замораживаются (inert).

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

const handle = loading.show({ text: 'Отправка…' })
setTimeout(() => handle.close(), 1500)

// Монтируется в указанную область, а не на весь экран
loading.show({ target: cardRef.current })

Методы loading

Метод	Описание	Возвращаемое значение
show	Показать маску	{ close }
closeAll	Закрыть все активные экземпляры (без анимации ухода)	void

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

LhLoadingOptions

Проп	Описание	Тип	По умолчанию
target	Цель монтирования: строка-селектор / элемент; если не задано — на весь экран	string | HTMLElement	Полный экран (body)
text	Текст уведомления	string	Из языкового пакета (zh-CN: 加载中…)
background	Цвет фона маски (значение CSS background)	string	rgba(255,255,255,72%)
lock	Блокировать ли прокрутку (для всего экрана блокируется body, для указанной цели — сама цель)	boolean	true

Отличия от message / notification

loading монтируется в произвольный целевой элемент (на весь экран или локально) и не может использовать общий одноэлементный контейнер, поэтому применяется createRoot для каждого экземпляра: каждый экземпляр владеет собственным root и дескриптором восстановления. Повторный show для той же цели сначала размонтирует предыдущий экземпляр.

Заморозка взаимодействия локальной маски

Помимо блокировки прокрутки цели, неполноэкранная маска устанавливает целевому элементу inert, замораживая взаимодействие с его содержимым; после закрытия автоматически восстанавливаются overflow / inert / position (для цели со статическим позиционированием временно добавляется relative).

Доступность

Маска имеет role="status" + aria-busy="true", а текст объявляется как aria-label; вращающийся значок — декоративный элемент (aria-hidden).

Импорт стилей по требованию

Маска переиспользует реализацию спиннера из button (.lh-button__spinner), поэтому для анимации вращения на странице нужно также подключить @lh-ui/react/style/button.

Стили

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