Loading ローディングオーバーレイ

全画面または局所的なローディングオーバーレイ：送信中やリストの読み込みなどの場面でユーザーの操作を凍結し、待機の通知を出します。

基本的な使い方

基本的な使い方

作品リストエリア（ローカルオーバーレイのマウント先）

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 は任意の対象要素（全画面または局所）にマウントされ、単例コンテナを共有できないため、per-instance createRoot を使います：各インスタンスが自身の root と復元用ハンドルを保持します。同一対象に繰り返し show すると、まず古いインスタンスをアンマウントします。

局所オーバーレイの操作凍結

全画面でないオーバーレイは対象のスクロールをロックするだけでなく、対象に inert を設定して内容の操作を凍結します。閉じた後は overflow / inert / position を自動的に復元します（static 配置の対象には一時的に relative が補われます）。

アクセシビリティ

オーバーレイは role="status" + aria-busy="true" で、テキストが aria-label として読み上げられます。 回転アイコンは装飾図形（aria-hidden）です。

オンデマンドのスタイル導入

オーバーレイは button の spinner の描画（.lh-button__spinner）を再利用するため、ページで @lh-ui/react/style/button も同時に導入しないと回転アニメーションがありません。

スタイル

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