Download and Wait States

1) Why manage waiting

• (1) what the action started, (2) how much it would take and (3) what to do if something went wrong.
• Good boot status reduces anxiety, keeps focus and saves time.

2) Pattern selection: skeleton, progress, spinner, streaming

Skeleton - when the structure of future content is known, but there is no data. Prevents CLS.
Progress bar (deterministic) - when the volume or stages are known (for example, apload, KYC).
Indeterminate progress - when the duration is unknown, but the process is real (initialization).
Spinner - only as a short indicator up to 600-800 ms; further - skeleton/progress/text.
Streaming/partial render - we give the data in parts (SSR/segments) and show the finished zones right away.

Rule: Do not leave the user in an empty space. If more than 1 s - give structure and meaning.

3) Time thresholds and budgets (benchmarks)

≤ 100 ms - instant visual response: 'busy' on the button/field.

≤ 1000 ms - skeleton/indicator + text "Load...."

4) Micro-patterns of instant response

We transfer the control to 'busy' immediately (animation ≤ 100 ms), block repeated clicks.
Change the text of the button to "Send...," show the toast "Request accepted" (optional).
When the focus returns to the field, the local skeleton is in the result zone.

5) Skeleton without "jumps"

Draw a 1:1 form of future content: block heights, media proportions ('aspect-ratio').
Animation shimmer: 1200-1600 ms, brightness amplitude ≤ 20%, no strobe.
On large lists - virtualization + limiting the number of skeletons in the 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) Progress and milestones