הורד ומדינות המתנה

1) מדוע לנהל את ההמתנה

• (1) מה החלה הפעולה, (2) כמה יידרש ו ־ (3) מה לעשות אם משהו ישתבש.
• מצב אתחול טוב מפחית חרדה, שומר על ריכוז וחוסך זמן.

2) בחירת תבניות: שלד, התקדמות, ספינר, זרימה

שלד - כאשר המבנה של תוכן עתידי ידוע, אבל אין נתונים. מונע את ה-CLS.
סרגל התקדמות (דטרמיניסטי) - כאשר הנפח או השלבים ידועים (לדוגמה, apload, KYC).
התקדמות בלתי מוגדרת - כאשר משך הזמן אינו ידוע, אבל התהליך הוא אמיתי (אתחול).
ספינר - רק כמחוון קצר עד 600-800 ms; עוד - שלד/התקדמות/טקסט.
הזרמה/שינוי חלקי - ניתן את הנתונים בחלקים (SSR/מקטעים) ונציג את האזורים המוגמרים מיד.

כלל: אל תשאיר את המשתמש בחלל ריק. אם יותר מ ־ 1 אס - תן מבנה ומשמעות.

3) סף זמן ותקציבים (מדדים)

100 ms - תגובה ויזואלית מיידית: ”עסוק” על הכפתור/שדה.

רישום 1000 ms-שלד/אינדיקטור + טקסט ”Load...”

4) מיקרו דפוסים של תגובה מיידית

אנחנו מעבירים את השליטה ל 'עסוק' באופן מיידי (אנימציה קלט 100 ms), לחסום קליקים חוזרים.
שנה את הטקסט של הכפתור ל ”שלח...”, הצג את הטוסט ”בקשה מתקבלת” (אופציונלי).
כאשר הפוקוס חוזר לשדה, השלד המקומי נמצא באזור התוצאה.

5) שלד ללא ”קפיצות”

צייר צורה 1:1 של תוכן עתידי: חוסם גבהים, פרופורציות מדיה (”היבט יחס”).
נצנוצי אנימציה: 1200-1600 ms, משרעת בהירות על 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) התקדמות ואבני דרך