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은 모든 대상 요소 (전체 화면 또는 부분 영역)에 마운트되어 싱글톤 컨테이너를 공유할 수 없으므로 인스턴스별 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'