Component

LoadingOverlay

화면 전체 작업을 잠그면서 현재 진행 의미를 알려주는 overlay입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { useState, useEffect } from 'react'

import { Button, LoadingOverlay } from '@amineslab/ui'

function LoadingExample({ title = '내보내는 중…', description = '잠시만 기다려 주세요.' } = {}) {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        if (!open)
            return;
        const timeout = window.setTimeout(() => setOpen(false), 1600);
        return () => window.clearTimeout(timeout);
    }, [open]);
    return (<div className="flex items-center gap-3">
      <Button onClick={() => setOpen(true)}>전체 작업 시작</Button>
      <span className="text-body-3 text-text-secondary">
        1.6초 뒤 작업이 끝나고 overlay가 닫힙니다.
      </span>
      <LoadingOverlay open={open} title={title} description={description}/>
    </div>);
}

export default function ExamplePreview() {
  return (<LoadingExample {...({"title":"내보내는 중…","description":"잠시만 기다려 주세요."} as const)}/>)
}

Props

@amineslab/ui에서 LoadingOverlay를 가져옵니다.

import { LoadingOverlay } from '@amineslab/ui'

`LoadingOverlay`

portal로 document body에 렌더하고 상태를 고지합니다.

Name	Type	Default	Description
`open*`	`boolean`	-	overlay 표시 여부입니다.
`title / description`	`string`	-	현재 진행 작업과 보조 정보를 표시합니다.
`icon`	`ReactNode`	-	기본 spinner 대신 사용할 의미 아이콘입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

차단형 진행 상태

1.6초 뒤 작업이 끝나고 overlay가 닫힙니다.

import { useState, useEffect } from 'react'

import { Button, LoadingOverlay } from '@amineslab/ui'

function LoadingExample({ title = '내보내는 중…', description = '잠시만 기다려 주세요.' } = {}) {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        if (!open)
            return;
        const timeout = window.setTimeout(() => setOpen(false), 1600);
        return () => window.clearTimeout(timeout);
    }, [open]);
    return (<div className="flex items-center gap-3">
      <Button onClick={() => setOpen(true)}>전체 작업 시작</Button>
      <span className="text-body-3 text-text-secondary">
        1.6초 뒤 작업이 끝나고 overlay가 닫힙니다.
      </span>
      <LoadingOverlay open={open} title={title} description={description}/>
    </div>);
}

export default function ExamplePreview() {
  return (<LoadingExample />)
}

사용 기준

권장하는 사용

삭제·전환처럼 배경 조작을 막아야 하는 작업에만 사용합니다.
단순 조회에는 skeleton과 StateFallback preset="error"를 사용하고, message는 작업 결과를 추측할 수 있는 문장으로 씁니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

이 컴포넌트에는 별도의 키보드 조작이 필요하지 않습니다.