डाउनलोड और प्रतीक्षा स्टेट्स

1) प्रतीक्षा क्यों करें

• (1) क्या कार्रवाई शुरू हुई, (2) इसमें कितना समय लगेगा और (3) अगर कुछ गलत हुआ तो क्या करना है।
• अच्छी बूट स्थिति चिंता को कम करती है, फोकस रखती है और समय बचाती है।

2) पैटर्न चयन: कंकाल, प्रगति, स्पिनर, स्ट्रीमिंग

कंकाल - जब भविष्य की सामग्री की संरचना ज्ञात होती है, लेकिन कोई डेटा नहीं होता है। सीएलएस को रोकता है।

प्रगति पट्टी (नियतात्मक) - जब वॉल्यूम या चरणों को जाना जाता है (उदाहरण के लिए, एप्लोड, केवाईसी)।

अनिश्चित प्रगति - जब अवधि अज्ञात है, लेकिन प्रक्रिया वास्तविक (प्रारंभिक) है।

स्पिनर - केवल 600-800 एमएस तक एक छोटे संकेतक के रूप में; आगे - कंकाल/प्रगति/पाठ।

स्ट्रीमिंग/आंशिक रेंडर - हम डेटा को भागों (एसएसआर/सेगमेंट) में देते हैं और तैयार क्षेत्रों को तुरंत दिखाते हैं।

नियम: उपयोक्ता को रिक्त स्थान पर न छोड़ें। यदि 1 s से अधिक - संरचना और अर्थ दें।

3) समय थ्रेसहोल्ड और बजट (बेंचमार्क)

≤ 100 ms - तत्काल दृश्य प्रतिक्रिया: बटन/क्षेत्र पर 'व्यस्त'।

≤ 1000 ms - कंकाल/सूचक + पाठ "लोड"...।

4) त्वरित प्रतिक्रिया के सूक्ष्म पैटर्न

हम नियंत्रण को तुरंत 'व्यस्त' (एनीमेशन ≤ 100 एमएस), बार-बार क्लिक को अवरुद्ध करते हैं।

बटन के पाठ को "भेजें..." में बदलें, टोस्ट "अनुरोध स्वीकृत" (वैकल्पिक) दिखाएं।

जब फोकस क्षेत्र में लौटता है, तो स्थानीय कंकाल परिणाम क्षेत्र में होता है।

5) "जंप" के बिना कंकाल

भविष्य की सामग्री का 1: 1 रूप आरेखित करें: ब्लॉक हाइट्स, मीडिया अनुपात ('पहलू-अनुपात')।

एनीमेशन शिमर: 1200-1600 एमएस, चमक आयाम ≤ 20%, कोई स्ट्रोब नहीं।

बड़ी सूचियों पर - वर्चुअलाइजेशन + डोम में कंकालों की संख्या को सीमित करना।

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) प्रगति और मील के पत्थर