Inline loading

Inline loading (인라인 로딩)

인라인 로딩 컴포넌트는 데이터가 처리 중임을 시각적으로 알려주는 피드백을 제공해요. 사용자의 요청이 진행 중임을 안심시키며, 백엔드 프로세스의 구체적인 세부 사항은 드러내지 않습니다.

출처: Inline loading

본문

개요 (Overview)

인라인 로딩 스피너는 액션이 처리 중임을 나타내는 데 사용돼요. 사용자에게 요청이 진행 중임을 알리고, 백엔드 프로세스에 대한 구체적인 세부 사항을 드러내지 않으면서 안심을 제공합니다.

인라인 로딩이 유용한 흔한 액션으로는 상당한 데이터 처리를 포함하는 create, update, delete 작업이 있어요. 인라인 로딩은 테이블 안, primary나 secondary 버튼 클릭 후, 또는 모달 안 등 다양한 컨텍스트에 나타날 수 있습니다.

언제 사용할까요 (When to use)

  • 즉시 수행할 수 없고 짧은 시간의 처리만 필요한 액션에 인라인 로딩 컴포넌트를 사용하세요.
  • 상태(status) 같은 작은 데이터 양을 검색하거나 새로 고칠 때 사용하세요.

언제 사용하지 말아야 할까요 (When not to use)

  • 전체 페이지 로드에는 인라인 로딩을 사용하지 마세요. 스켈레톤 상태를 대신 사용하세요.
  • 초기 페이지 로드나 새로 고침이 아닌 한, 한 번에 둘 이상의 항목이나 액션에 인라인 로딩을 트리거하지 마세요.

포맷 (Formatting)

구조 (Anatomy)

  • 로딩 상태(Loading status): 로딩 시퀀스의 상태(active, inactive, finished, error)를 나타내요.
  • 라벨(Label, 선택): 로딩 상태를 설명하는 보조 텍스트.

배치 (Placement)

인라인 로딩이 콘텐츠를 일시적으로 대체할 때는 대체한 콘텐츠와 같은 위치에 나타나고 같은 정렬을 유지해야 해요.

콘텐츠 (Content)

주요 요소 (Main elements)

라벨 (Label, 선택)

  • 액션을 위한 설명적인 로딩 텍스트는 선택 사항이지만 권장됩니다. 공간이 제한적이거나 텍스트 추가가 불필요하다고 생각되면 애니메이션만 실행할 수도 있어요.
  • 라벨은 수행 중인 액션의 상태를 설명해야 해요. 예를 들어 폼이 저장되는 동안 상태가 active라면 라벨은 "Saving …"이라고 말해야 합니다.
  • 로딩 상태가 finished로 바뀌면 라벨도 바뀌어야 해요. 예를 들어 저장이 끝나면 "Saved"라고 읽히게 됩니다.
  • 로딩 상태가 error로 바뀌면 라벨은 사용자에게 오류나 실패가 발생했음을 알리도록 바뀌어야 해요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

동작 (Behaviors)

상태 (States)

인라인 로딩에는 네 가지 상태가 있어요: inactive, active, finished, error.

비활성 (Inactive)

비활성 로딩 상태는 로드되는 데이터가 없을 때예요. 비활성에는 시각적 표시가 없습니다.

활성 (Active)

활성 로딩 상태는 액션이 여전히 진행 중임을 나타내요.

완료 (Finished)

완료 로딩 상태는 액션(동작)이 성공적으로 완료되었음을 나타냅니다. 성공 상태는 선택적 함수 onSuccess를 호출하기 전까지 1.5초 동안 활성입니다. onSuccess 함수를 사용해 새 데이터를 다시 가져오거나, 모달을 닫거나, 폼을 재설정하세요. 함수가 지정되지 않으면 성공 상태는 무기한 지속됩니다.

오류 (Error)

오류 로딩 상태는 액션이 성공적으로 완료되지 않았음을 나타내요. 오류가 발생하면 인라인 로딩 컴포넌트는 비활성화되고, 인라인 알림이나 폼 안의 오류 처리가 나타나야 합니다.

인터랙션 (Interactions)

버튼과 관련된 인터랙티브 요소는 로딩 중에는 비활성화되어야 해요. 예를 들어 사용자가 모달의 버튼을 클릭해 정보를 제출하면, 버튼 자체가 로딩 상태를 표시하고 액션이 완료될 때까지 비활성화됩니다. 이렇게 하면 프로세스 중에 사용자가 버튼과 다시 상호작용할 수 없습니다.

수정자 (Modifiers)

인라인 로딩 아이콘이 라벨에서 맥락을 얻을 수 있다면, 보이는 라벨 없이 단독으로 사용할 수 있어요. 필드 입력 안에서 가장 흔히 이렇게 사용됩니다.

  • Loading
  • Skeleton states
  • Loading pattern
  • File uploader

더 알아보기 (Learn more)

인라인 로딩은 짧은 시간이 걸리는 액션의 처리 진행을 알리는 피드백 컴포넌트예요. 라벨은 상태(active/finished/error)에 맞춰 바꾸고, 로딩 중에는 관련 버튼을 비활성화해 중복 상호작용을 막으세요. 전체 페이지 로드는 인라인 로딩 대신 스켈레톤 상태를 사용해야 합니다.