कुछ कार्यों के निष्पादित होने के दौरान दिखाई देने वाले लोडिंग यूआई को शामिल करके अपने नेक्स्ट.जेएस अनुप्रयोगों में तत्काल उपयोगकर्ता प्रतिक्रिया प्रदान करें।

लोडिंग यूआई और विज़ुअल तत्व वेब और मोबाइल एप्लिकेशन में महत्वपूर्ण घटक हैं; वे उपयोगकर्ता अनुभव और सहभागिता को बढ़ाने में महत्वपूर्ण भूमिका निभाते हैं। ऐसे संकेतों के बिना, उपयोगकर्ता इस बात को लेकर हैरान और अनिश्चित हो सकते हैं कि क्या एप्लिकेशन ठीक से काम कर रहा है, क्या उन्होंने सही कार्रवाई शुरू की है, या क्या उनके कार्यों पर कार्रवाई की जा रही है।

उपयोगकर्ताओं को विभिन्न दृश्य संकेत प्रदान करके जो चल रहे प्रसंस्करण को इंगित करते हैं, आप प्रभावी ढंग से कम कर सकते हैं किसी भी प्रकार की अनिश्चितता और हताशा - अंततः उन्हें समय से पहले आवेदन से बाहर निकलने से रोकती है।

प्रदर्शन और उपयोगकर्ता अनुभव पर यूआई लोड करने का प्रभाव

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

instagram viewer

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

आदर्श रूप से, लोडिंग यूआई का प्रभावी ढंग से उपयोग अतुल्यकालिक सामग्री लोडिंग की अनुमति देता है - यह पृष्ठभूमि में विशिष्ट घटकों को लोड करते समय पूरे पृष्ठ को फ्रीज होने से रोकता है; अनिवार्य रूप से, एक सहज ब्राउज़िंग अनुभव बनाना।

इसके अलावा, चल रही प्रक्रियाओं का स्पष्ट दृश्य संकेत प्रदान करके, उपयोगकर्ताओं को सामग्री पुनर्प्राप्ति का धैर्यपूर्वक इंतजार करने की अधिक संभावना है।

Next.js 13 में रिएक्ट सस्पेंस के साथ शुरुआत करना

कौतुहल एक रिएक्ट घटक है जो पृष्ठभूमि में चलने वाले अतुल्यकालिक संचालन जैसे डेटा लाने का प्रबंधन करता है। सीधे शब्दों में कहें तो, यह घटक आपको फ़ॉलबैक घटक को तब तक प्रस्तुत करने देता है जब तक कि इच्छित चाइल्ड घटक आवश्यक डेटा को माउंट और लोड न कर दे।

सस्पेंस कैसे काम करता है इसका एक उदाहरण यहां दिया गया है। आइए मान लें कि आपके पास एक घटक है जो एपीआई से डेटा लाता है।

exportdefaultfunctionTodos() {
const data = fetchData() {
//fetch data...
return data;
 };
return<h1> {data.title} h1>
}
// the fallback component
exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

सस्पेंस प्रदर्शित होगा लोड हो रहा है घटक की सामग्री तक सब घटक लोड हो रहा है और रेंडरिंग के लिए तैयार है। इसे प्राप्त करने के लिए सस्पेंस सिंटैक्स यहां दिया गया है:

import { Suspense } from'react';
functionApp() {
return (
 <>
}>

 </Suspense>
 </>
 );}

Next.js 13 रिएक्ट सस्पेंस को सपोर्ट करता है

Next.js 13 ने अपने ऐप डायरेक्टरी फीचर के माध्यम से सस्पेंस के लिए समर्थन जोड़ा। अनिवार्य रूप से, ऐप निर्देशिका के साथ काम करना आपको एक समर्पित फ़ोल्डर के भीतर किसी विशेष रूट के लिए पेज फ़ाइलों को शामिल करने और व्यवस्थित करने की अनुमति देता है।

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

अब, आइए एक डेमो टू-डू एप्लिकेशन बनाकर नेक्स्ट.जेएस 13 में रिएक्ट सस्पेंस को एकीकृत करें।

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं GitHub भण्डार.

Next.js 13 प्रोजेक्ट बनाएं

आप एक सरल एप्लिकेशन बनाएंगे जो कार्यों की एक सूची प्राप्त करेगा डमीजसन एपीआई समापनबिंदु. आरंभ करने के लिए, Next.js 13 को स्थापित करने के लिए नीचे दिए गए कमांड को चलाएँ।

npx create-next-app@latest next-project --experimental-app

टोडोस रूट को परिभाषित करें

के अंदर स्रोत/ऐप निर्देशिका, एक नया फ़ोल्डर बनाएं और उसे नाम दें सब. इस फ़ोल्डर के अंदर, एक नया जोड़ें पेज.जे.एस फ़ाइल, और नीचे दिए गए कोड को शामिल करें।

asyncfunctionTodos() {
asyncfunctionfetchTodos() {
let res = await fetch("https://dummyjson.com/todos");
const todosData = await res.json();
return todosData
 }


const {todos} = await fetchTodos();


asyncfunctionwait(ms) {
returnnewPromise(resolve => setTimeout(resolve, ms));
 }


await wait(3000); 


return (
 <> 


"todo-container">
"todo-list">
 {todos.slice(0, 10).map((todo) => (
    

    "todos">
  • 
<h2>{todo.todo}h2> </li>
     </div>
     </ul>
     ))}
     </div>
     </div>
     </>
     );
    • 

    







}
exportdefault Todos;

अतुल्यकालिक फ़ंक्शन, सब, DummyJSON API से कार्यों की एक सूची प्राप्त करता है। इसके बाद यह ब्राउज़र पेज पर कार्यों की एक सूची प्रस्तुत करने के लिए लाए गए कार्यों की श्रृंखला के माध्यम से मैप करता है।

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

अधिक यथार्थवादी उपयोग के मामले में; देरी का अनुकरण करने के बजाय, अनुप्रयोगों के भीतर गतिविधियों को संसाधित करना, डेटाबेस से डेटा प्राप्त करना जैसी स्थितियाँ, एपीआई का उपभोग करना, या यहां तक ​​कि धीमी एपीआई प्रतिक्रिया समय के कारण कुछ संक्षिप्त देरी हो सकती है।

Next.js एप्लिकेशन में रिएक्ट सस्पेंस को एकीकृत करें

खोलें ऐप/लेआउट.जेएस फ़ाइल करें और निम्नलिखित कोड के साथ बॉयलरप्लेट नेक्स्ट.जेएस कोड को अपडेट करें।

import React, { Suspense } from'react';
import Loading from'@/app/Todos/loading';
exportconst metadata = {
 title: 'Create Next App',
 description: 'Generated by create next app',
}
exportdefaultfunctionRootLayout({ children }) {
return (
"en">

}>
 {children}
 </Suspense>
 </body>
 </html>
 )
}

ऐप/लेआउट.जेएस Next.js 13 में फ़ाइल एक केंद्रीय लेआउट घटक के रूप में कार्य करती है जो एप्लिकेशन के लेआउट की समग्र संरचना और व्यवहार को परिभाषित करती है। इस मामले में, पारित करना बच्चे के लिए सहारा कौतुहल घटक, यह सुनिश्चित करता है कि लेआउट संपूर्ण एप्लिकेशन की सामग्री के लिए एक आवरण बन जाए।

कौतुहल घटक प्रदर्शित करेगा लोड हो रहा है घटक फ़ॉलबैक के रूप में जबकि चाइल्ड घटक अपनी सामग्री को अतुल्यकालिक रूप से लोड कर रहे हैं; उपयोगकर्ता को यह संकेत देना कि सामग्री पृष्ठभूमि में लाई जा रही है या संसाधित की जा रही है।

होम रूट फ़ाइल को अद्यतन करें

खोलें ऐप/पेज.जेएस फ़ाइल, बॉयलरप्लेट नेक्स्ट.जेएस कोड हटाएं, और नीचे कोड जोड़ें।

import React from'react';
import Link from"next/link";
functionHome () {
return (



Next.js 13 React Suspense Loading Example</h1>
"/Todos">Get Todos</Link>
 </div>
 </main>
 )
}


exportdefault Home;

लोडिंग.जेएस फ़ाइल बनाएं

अंत में, आगे बढ़ें, और एक बनाएं लोड हो रहा है.js फ़ाइल के अंदर ऐप/टोडोस निर्देशिका। इस फ़ाइल के अंदर, नीचे दिया गया कोड जोड़ें।

exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

लोडिंग यूआई घटक में आधुनिक स्पिनर जोड़ना

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

इस पैकेज का उपयोग करने के लिए, आगे बढ़ें और इसे अपने प्रोजेक्ट में इंस्टॉल करें।

npm install react-loader-spinner --save

इसके बाद, अपना अपडेट करें लोड हो रहा है.js फ़ाइल इस प्रकार है:

"use client"
import { RotatingLines} from'react-loader-spinner'
functionLoading() {
return (




Loading the Todos ...</p> 
 strokeColor="grey"
 strokeWidth="5"
 animationDuration="0.75"
 width="96"
 visible={true}
 />
 </div>
 );
}


exportdefault Loading;

अब, लोडिंग यूआई एक लोडिंग संदेश प्रदर्शित करेगा और टोडोस डेटा लाते समय चल रही प्रोसेसिंग को इंगित करने के लिए एक घूर्णन लाइन स्पिनर एनीमेशन प्रस्तुत करेगा।

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

अपने वेब एप्लिकेशन में लोडिंग यूआई को शामिल करने से उपयोगकर्ता अनुभव में उल्लेखनीय वृद्धि हो सकती है। अतुल्यकालिक संचालन के दौरान उपयोगकर्ताओं को दृश्य संकेत प्रदान करके, आप उनकी चिंताओं और किसी भी अनिश्चितता को प्रभावी ढंग से कम कर सकते हैं, और परिणामस्वरूप उनकी भागीदारी को अधिकतम कर सकते हैं।