로딩 상태는 사용자에 대한 한 가지 질문에 답하기 위해 존재합니다. 무슨 일이 일어나고 있나요? 대답이 없으면 사람들은 다시 탭하거나 페이지를 다시 로드하거나 떠납니다. 정답은 그들이 얼마나 오래 기다리는지에 달려 있습니다.
약 10분의 1초 미만의 매우 짧은 대기 시간 동안 대부분의 사람들은 지연을 인지하지 못하므로 표시기는 깜박임만 추가합니다. 일반적인 기술은 스피너를 표시하기 전에 잠시 기다리는 것입니다. 따라서 빠른 응답은 스피너를 전혀 표시하지 않습니다.
몇 초 또는 몇 초 동안 결과가 나타날 위치에 피드백을 표시합니다. 향후 레이아웃의 회색 윤곽선인 스켈레톤 화면은 향후 레이아웃을 보여주고 레이아웃 전환을 줄여주기 때문에 목록, 카드 및 프로필에 적합합니다. 스피너는 작은 영역에 대해 작동하거나 결과가 예측 가능한 모양이 아닌 경우에 작동합니다.
업로드, 내보내기 또는 AI 생성과 같은 장기 작업의 경우 측정할 수 있으면 실제 진행 상황을 보여주고, 무슨 일이 일어나고 있는지 설명하고 사람들이 취소하거나 다른 작업을 계속할 수 있도록 하세요. 다른 정보 없이 1분 동안 회전하는 스피너는 실패한 것처럼 느껴집니다.
작업을 시작한 컨트롤에도 상태가 필요합니다. 로딩 상태로 전환되고 두 번 누를 수 없는 제출 버튼은 중복된 주문과 메시지를 방지합니다. 로딩이 끝나면 자동으로 기본값으로 돌아가기보다는 성공 또는 오류로 명확하게 이동하세요.
여기서 애니메이션이 도움이 되지만 루프에서 조용하고 짧게 유지하고 모션 감소 설정을 존중하십시오. 우리가 만든 ExodeUI를 사용하면 코드가 전환되는 하나의 파일에 로드, 성공 및 오류 상태가 포함된 로더나 버튼을 디자인할 수 있습니다.