다운로드 및 대기 상태

1) 대기 관리 이유

사용자는 세 가지를 이해해야합니다

(1) 조치가 시작된 것, (2) 얼마나 걸리고 (3) 무언가 잘못되었을 경우해야 할 일.

좋은 부팅 상태는 불안을 줄이고 집중력을 유지하며 시간을 절약합니

2) 패턴 선택: 골격, 진행 상황, 스피너, 스트리밍

해골-미래 컨텐츠의 구조가 알려져 있지만 데이터가 없을 때. CLS를 방지합니다.
진행 막대 (결정 론적) - 볼륨 또는 스테이지가 알려진 경우 (예: apload, KYC).
불확실한 진행 상황-지속 시간을 알 수 없지만 프로세스가 실제 (초기화) 인 경우.
스피너-최대 600-800ms의 짧은 표시기 일뿐입니다. 추가 - 골격/진행/텍스트.
스트리밍/부분 렌더링-데이터를 부품 (SSR/세그먼트) 으로 제공하고 완료된 영역을 즉시 표시합니다.

규칙: 사용자를 빈 공간에 두지 마십시오. 1 초 이상인 경우 구조와 의미를 부여하십시오.

3) 시간 임계 값 및 예산 (벤치 마크)

100 ms- 즉각적인 시각적 반응: 버튼/필드에서 '바쁜'.
180ms - 골격/표시기 + 텍스트 "부하"....

4) 즉각적인 반응의 마이크로 패턴

우리는 컨트롤을 즉시 '바쁜' (애니메이션 PK100ms) 으로 전송하고 반복 클릭을 차단합니다.
버튼 텍스트를 "보내기"... 로 변경하고 토스트 "요청 수락" (선택 사항) 을 표시하십시오.
초점이 필드로 돌아 오면 로컬 스켈레톤이 결과 영역에 있습니다.

5) "점프" 가없는 해골

블록 높이, 미디어 비율 ('종횡비') 과 같은 1:1 형태의 미래 컨텐츠를 그립니다.
애니메이션 반짝 거림: 1200-1600ms, 밝기 진폭 약 20%, 스트로브 없음.
큰 목록에서-가상화 + DOM의 골격 수를 제한합니다.

css
.skeleton{position:relative; background:var(--bg-elevated); border-radius:12px; overflow:hidden}
.skeleton::after{
content:"";position:absolute; inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
animation:shimmer 1. 4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

6) 진행 및 이정표