Κατάσταση λήψης και αναμονής

1) Γιατί να διαχειριστείτε την αναμονή

• (1) τι ξεκίνησε η δράση, (2) πόσο θα χρειαζόταν και (3) τι να κάνει αν κάτι πάει στραβά.
• Η καλή κατάσταση εκκίνησης μειώνει το άγχος, διατηρεί την εστίαση και εξοικονομεί χρόνο.

2) Επιλογή προτύπων: σκελετός, πρόοδος, spinner, streaming

Σκελετός - όταν η δομή του μελλοντικού περιεχομένου είναι γνωστή, αλλά δεν υπάρχουν δεδομένα. Προλαμβάνει την CLS.
Ράβδος προόδου (deterministic) - όταν ο όγκος ή τα στάδια είναι γνωστά (για παράδειγμα, φορτίο, KYC).
Απροσδιόριστη πρόοδος - όταν η διάρκεια είναι άγνωστη, αλλά η διαδικασία είναι πραγματική (αρχικοποίηση).
Spinner - μόνο ως σύντομος δείκτης έως 600-800 ms, - σκελετός/πρόοδος/κείμενο.
Ροή/μερική απόδοση - δίνουμε τα δεδομένα σε μέρη (SSR/τμήματα) και εμφανίζουμε τις τελικές ζώνες αμέσως.

Κανόνας: Μη αφήνετε το χρήστη σε κενό χώρο. Εάν υπερβαίνει το 1 s - δώστε δομή και νόημα.

3) Χρονικά όρια και προϋπολογισμοί (σημεία αναφοράς)

100 ms - άμεση οπτική απόκριση: «απασχολημένος» στο κουμπί/πεδίο.
1000 ms - σκελετός/δείκτης + κείμενο «Φορτώστε»...

4) Μικροτυπίες στιγμιαίας απόκρισης

Μεταφέρουμε τον έλεγχο στο 'busy' αμέσως (animation ≤ 100 ms), μπλοκάρουμε επαναλαμβανόμενα κλικ.
Αλλαγή του κειμένου του κουμπιού σε «Αποστολή»..., εμφάνιση της πρόποσης «Αποδεκτή αίτηση» (προαιρετικά).
Όταν η εστίαση επιστρέφει στο πεδίο, ο τοπικός σκελετός βρίσκεται στη ζώνη αποτελεσμάτων.

5) Σκελετός χωρίς «άλματα»

Σχεδιάστε μια μορφή 1:1 μελλοντικού περιεχομένου: ύψος μπλοκ, αναλογίες μέσων («αναλογία διαστάσεων»).
Animation shimmer: 1200-1600 ms, εύρος φωτεινότητας ≤ 20%, χωρίς strobe.
Σε μεγάλες λίστες - εικονοποίηση + περιορισμός του αριθμού των σκελετών στο 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) Πρόοδος και ορόσημα