Next.js. में स्केलेटन स्क्रीन कैसे जोड़ें

यदि आपने किसी वेब या मोबाइल ऐप का उपयोग किया है, तो आपने शायद एक स्केलेटन स्क्रीन देखी होगी। जब कोई अपडेट डेटा प्राप्त करने पर निर्भर करता है, जिसके आने में कुछ समय लग सकता है, तो यह UI डिवाइस एक बेहतर अनुभव प्रदान करता है।

पता करें कि कंकाल स्क्रीन वास्तव में क्या है, आप उन्हें अपने ऐप में क्यों उपयोग करना चाहते हैं, और उन्हें Next.js में कैसे लागू करना है।

कंकाल स्क्रीन क्या है?

कंकाल स्क्रीन एक यूआई तत्व है जो इंगित करता है कि कुछ लोड हो रहा है। यह आमतौर पर बिना किसी डेटा के यूआई घटक की एक खाली या "खाली" स्थिति होती है। उदाहरण के लिए, यदि आप किसी डेटाबेस से आइटम्स की सूची लोड करना चाहते हैं, तो स्केलेटन स्क्रीन बिना डेटा वाली एक साधारण सूची हो सकती है, केवल प्लेसहोल्डर बॉक्स तत्व।

कई वेबसाइट और ऐप स्केलेटन स्क्रीन का इस्तेमाल करते हैं। कुछ उन्हें लोडिंग स्थिति के लिए उपयोग करते हैं, जबकि अन्य उन्हें कथित प्रदर्शन को बेहतर बनाने के तरीके के रूप में उपयोग करते हैं।

कंकाल स्क्रीन का उपयोग क्यों करें?

ऐसे कुछ कारण हैं जिनकी वजह से आप अपने Next.js ऐप में स्केलेटन स्क्रीन का उपयोग करना चाह सकते हैं।

सबसे पहले, यह आपके ऐप के कथित प्रदर्शन में सुधार कर सकता है। यदि उपयोगकर्ता डेटा लोड होने के दौरान एक खाली स्क्रीन देखते हैं, तो वे मान सकते हैं कि ऐप धीमा है या ठीक से काम नहीं कर रहा है। हालाँकि, यदि वे एक कंकाल स्क्रीन देखते हैं, तो वे जानते हैं कि डेटा लोड हो रहा है और ऐप अपेक्षा के अनुरूप काम कर रहा है।

दूसरा, कंकाल स्क्रीन आपके यूआई में "जंक" या तड़कापन को कम करने में मदद कर सकती है। यदि डेटा को एसिंक्रोनस रूप से लोड किया जा रहा है, तो जैसे ही आपका ऐप डेटा प्राप्त करता है, UI वृद्धिशील रूप से अपडेट हो सकता है। यह एक आसान उपयोगकर्ता अनुभव के लिए बना सकता है।

तीसरा, कंकाल स्क्रीन एक बेहतर उपयोगकर्ता अनुभव प्रदान कर सकती है यदि डेटा को धीमे या अविश्वसनीय कनेक्शन से लोड किया जा रहा है। यदि डेटा किसी दूरस्थ सर्वर से प्राप्त किया जा रहा है, तो संभावना है कि कनेक्शन धीमा या बाधित हो सकता है। इन मामलों में, स्केलेटन स्क्रीन दिखाना मददगार हो सकता है ताकि उपयोगकर्ता जान सकें कि डेटा लोड हो रहा है, भले ही इसमें कुछ समय लगे।

Next.js में स्केलेटन स्क्रीन कैसे लागू करें

Next.js में स्केलेटन स्क्रीन लागू करने के कुछ तरीके हैं। आप एक साधारण कंकाल स्क्रीन को मैन्युअल रूप से फिर से बनाने के लिए अंतर्निहित सुविधाओं का उपयोग कर सकते हैं। या आप जैसे पुस्तकालय का उपयोग कर सकते हैं प्रतिक्रिया-लोडिंग-कंकाल या सामग्री यूआई आपके लिए काम करने के लिए।

विधि 1: अंतर्निहित सुविधाओं का उपयोग करना

Next.js में, आप उपयोग कर सकते हैं विभिन्न प्रतिक्रिया हुक और कंकाल स्क्रीन दिखाने के लिए सरल स्थितियाँ। आप उपयोग कर सकते हैं && कंकाल स्क्रीन को सशर्त रूप से प्रस्तुत करने के लिए सहारा।

आयात {यूज़स्टेट, यूज़एफ़ेक्ट} से 'प्रतिक्रिया';
समारोहMyComponent() {
कॉन्स्ट [isLoading, setIsLoading] = useState(सत्य);
उपयोग प्रभाव (() => {
 सेटटाइमआउट (() => सेट लोड हो रहा है (असत्य), 1000);
 }, []);
वापस करना (
<डिव>
 {लोड हो रहा है && (
<डिव>
 लोड हो रहा है...
</div>
 )}
 {!लोड हो रहा है && (
<डिव>
 मेरी घटक सामग्री।
</div>
 )}
</div>
 );
}
निर्यातगलती करना MyComponent;

उपरोक्त कोड का उपयोग करता है useState डेटा लोड हो रहा है या नहीं, यह ट्रैक करने के लिए हुक (लोड हो रहा है). यह उपयोग करता है useEffect अतुल्यकालिक रूप से डेटा लोड करने का अनुकरण करने के लिए हुक। अंत में, यह उपयोग करता है && कंकाल स्क्रीन या घटक सामग्री को सशर्त रूप से प्रस्तुत करने के लिए ऑपरेटर।

यह विधि आदर्श नहीं है, क्योंकि इसे मैन्युअल रूप से सेट करने की आवश्यकता होती है लोड हो रहा है राज्य और अनुकरण डेटा लोड हो रहा है। हालाँकि, यह Next.js में कंकाल स्क्रीन को लागू करने का एक सरल तरीका है।

विधि 2: 'रिएक्ट-लोडिंग-कंकाल' जैसी लाइब्रेरी का उपयोग करना

कंकाल स्क्रीन को लागू करने का दूसरा तरीका एक पुस्तकालय का उपयोग करना है प्रतिक्रिया-लोडिंग-कंकाल. प्रतिक्रिया-लोडिंग-कंकाल एक प्रतिक्रिया घटक है जिसका उपयोग आप कंकाल स्क्रीन बनाने के लिए कर सकते हैं। यह है एक घटक जिसे आप किसी भी UI तत्व के चारों ओर लपेट सकते हैं।

प्रतिक्रिया-लोडिंग-कंकाल का उपयोग करने के लिए, आपको इसे स्थापित करने की आवश्यकता है NPM.

npm और प्रतिक्रिया-लोडिंग-skeleton

इसके इंस्टॉल हो जाने के बाद, आप इसे अपने Next.js ऐप में इम्पोर्ट कर सकते हैं और इसे इस तरह इस्तेमाल कर सकते हैं:

आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात कंकाल से 'प्रतिक्रिया-लोडिंग-कंकाल';
आयात 'प्रतिक्रिया-लोडिंग-कंकाल/जिला/skeleton.css'
कॉन्स्ट ऐप = () => {
वापस करना (
<डिव>
<कंकाल />
<h3>दूसरी स्क्रीन</h3>
<कंकाल की ऊंचाई={40} />
</div>
 );
};
निर्यातगलती करना अनुप्रयोग;

उपरोक्त कोड आयात करता है कंकाल प्रतिक्रिया-लोडिंग-कंकाल पुस्तकालय से घटक। यह तब इसका उपयोग दो कंकाल स्क्रीन बनाने के लिए करता है। यह उपयोग करता है ऊंचाई कंकाल स्क्रीन की ऊंचाई निर्धारित करने के लिए सहारा। अब आप कर सकते हैं सशर्त प्रतिपादन का प्रयोग करें डेटा मौजूद होने पर ही घटक को रेंडर करने के लिए।

विधि 3: सामग्री UI का उपयोग करना

यदि आप अपने Next.js ऐप में मटीरियल UI का उपयोग कर रहे हैं, तो आप इसका उपयोग कर सकते हैं से घटक @मुई/सामग्री पुस्तकालय। सामग्री यूआई से घटक में कुछ प्रॉप्स हैं जिनका उपयोग आप कंकाल स्क्रीन को अनुकूलित करने के लिए कर सकते हैं।

उपयोग करने के लिए सामग्री यूआई से घटक, आपको पहले इसे एनपीएम का उपयोग करके स्थापित करने की आवश्यकता है:

एनपीएम इंस्टॉल करें @मुई/material

इसके इंस्टॉल हो जाने के बाद, आप इसे अपने Next.js ऐप में इम्पोर्ट कर सकते हैं और इसे इस तरह इस्तेमाल कर सकते हैं:

आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात कंकाल से '@ मुई/सामग्री/कंकाल';
कॉन्स्ट ऐप = () => {
वापस करना (
<डिव>
<कंकाल प्रकार ="रेक्ट" चौड़ाई={210} ऊंचाई={118} />
<h3>दूसरी स्क्रीन</h3>
<कंकाल प्रकार ="मूलपाठ" />
</div>
 );
};
निर्यातगलती करना अनुप्रयोग;

उपरोक्त कोड आयात करता है कंकाल से घटक @ सामग्री-यूआई / प्रयोगशाला पुस्तकालय। यह तब दो कंकाल स्क्रीन बनाता है। प्रकार प्रोप कंकाल स्क्रीन के प्रकार को सेट करता है। चौड़ाई और ऊंचाई प्रॉप्स कंकाल स्क्रीन के आयामों को परिभाषित करते हैं।

आप अपने स्केलेटन स्क्रीन में विभिन्न एनिमेशन भी जोड़ सकते हैं। सामग्री यूआई में कुछ अंतर्निहित एनिमेशन हैं जिनका आप उपयोग कर सकते हैं। उदाहरण के लिए, आप का उपयोग कर सकते हैं चेतन अपने कंकाल स्क्रीन में लुप्त होती एनीमेशन जोड़ने के लिए प्रोप:

आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात कंकाल से '@ मुई/सामग्री/कंकाल';
कॉन्स्ट ऐप = () => {
वापस करना (
<डिव>
<कंकाल प्रकार ="रेक्ट" चौड़ाई={210} ऊंचाई={118} />
<h3>दूसरी स्क्रीन</h3>
<कंकाल प्रकार ="मूलपाठ" चेतन ="लहर" />
</div>
 );
};
निर्यातगलती करना अनुप्रयोग;

जोड़कर चेतन ए के लिए सहारा घटक, आप अपने यूजर इंटरफेस में विजुअल मूवमेंट को शामिल कर सकते हैं। लहर मान कंकाल स्क्रीन पर लहराता हुआ एनीमेशन जोड़ता है। कंकाल स्क्रीन के बाद सामग्री दिखाने के लिए अब आप सशर्त प्रतिपादन का उपयोग कर सकते हैं।

कंकाल स्क्रीन के साथ उपयोगकर्ता अनुभव में सुधार करें

स्केलेटन स्क्रीन आपके Next.js ऐप के उपयोगकर्ता अनुभव को बेहतर बनाने का एक शानदार तरीका हो सकता है। वे कथित गति को बढ़ा सकते हैं, जंक को कम कर सकते हैं, और एक बेहतर अनुभव प्रदान कर सकते हैं जब डेटा धीमी या अस्थिर कनेक्शन पर यात्रा करता है।

कंकाल स्क्रीन जोड़ने के लिए आप जो भी तरीका चुनते हैं, वे आपके Next.js ऐप के उपयोगकर्ता अनुभव को बेहतर बनाने का एक शानदार तरीका हैं।