Η φόρτωση διεπαφής χρήστη και οπτικών στοιχείων είναι σημαντικά στοιχεία σε εφαρμογές ιστού και για κινητές συσκευές. παίζουν καθοριστικό ρόλο στη βελτίωση της εμπειρίας και της αφοσίωσης των χρηστών. Χωρίς τέτοιες ενδείξεις, οι χρήστες μπορεί να μπερδευτούν και να μην είναι σίγουροι για το εάν η εφαρμογή λειτουργεί σωστά, εάν ενεργοποίησαν τις σωστές ενέργειες ή εάν οι ενέργειές τους υποβάλλονται σε επεξεργασία.

Παρέχοντας στους χρήστες διάφορες οπτικές ενδείξεις που υποδεικνύουν τη συνεχιζόμενη επεξεργασία, μπορείτε να μετριάζετε αποτελεσματικά οποιαδήποτε μορφή αβεβαιότητας και απογοήτευσης—που τελικά τους αποτρέπει από την πρόωρη έξοδο από την εφαρμογή.

Επίπτωση της φόρτωσης διεπαφής χρήστη στην απόδοση και την εμπειρία χρήστη

Τα δέκα ευρετικά στοιχεία του Jakob Nielsen για τη σχεδίαση διεπαφής χρήστη τονίζουν τη σημασία της διασφάλισης της τρέχουσας κατάστασης του συστήματος ορατή στους τελικούς χρήστες. Αυτή η αρχή υπογραμμίζει την ανάγκη για στοιχεία διεπαφής χρήστη, όπως η φόρτωση διεπαφής χρήστη και άλλη διεπαφή χρήστη ανατροφοδότησης στοιχεία για την έγκαιρη παροχή των κατάλληλων σχολίων στους χρήστες, σχετικά με τις τρέχουσες διαδικασίες και εντός των απαιτούμενων χρονικό πλαίσιο.

Οι διεπαφές φόρτωσης παίζουν καθοριστικό ρόλο στη διαμόρφωση της συνολικής απόδοσης και της εμπειρίας χρήστη των εφαρμογών. Από την άποψη της απόδοσης, η εφαρμογή αποτελεσματικών οθονών φόρτωσης μπορεί να βελτιώσει σημαντικά την ταχύτητα και την ανταπόκριση μιας εφαρμογής Ιστού.

Στην ιδανική περίπτωση, η αποτελεσματική χρήση των διεπαφής χρήστη φόρτωσης επιτρέπει την ασύγχρονη φόρτωση περιεχομένου—αυτό αποτρέπει το πάγωμα ολόκληρης της σελίδας κατά τη φόρτωση συγκεκριμένων στοιχείων στο παρασκήνιο. ουσιαστικά, δημιουργώντας μια πιο ομαλή εμπειρία περιήγησης.

Επιπλέον, προσφέροντας μια σαφή οπτική ένδειξη των συνεχιζόμενων διαδικασιών, οι χρήστες είναι πιο πιθανό να περιμένουν υπομονετικά την ανάκτηση περιεχομένου.

Ξεκινώντας με το React Suspense στο Next.js 13

Αγωνία είναι ένα στοιχείο React που διαχειρίζεται ασύγχρονες λειτουργίες που εκτελούνται στο παρασκήνιο, όπως η ανάκτηση δεδομένων. Με απλά λόγια, αυτό το στοιχείο σάς επιτρέπει να αποδώσετε ένα εναλλακτικό στοιχείο έως ότου το προβλεπόμενο θυγατρικό στοιχείο προσαρτηθεί και φορτώσει τα απαιτούμενα δεδομένα.

Εδώ είναι ένα παράδειγμα του πώς λειτουργεί το Suspense. Ας υποθέσουμε ότι έχετε ένα στοιχείο που ανακτά δεδομένα από ένα API.

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

Το suspense θα εμφανίσει το Φόρτωση συστατικό μέχρι το περιεχόμενο του Todos Το στοιχείο ολοκληρώνει τη φόρτωση και είναι έτοιμο για απόδοση. Ακολουθεί η σύνταξη Suspense για να το πετύχετε αυτό:

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

 </Suspense>
 </>
 );}

Next.js 13 Υποστηρίζει το React Suspense

Το Next.js 13 πρόσθεσε υποστήριξη για το Suspense μέσω της λειτουργίας καταλόγου εφαρμογών του. Ουσιαστικά, εργασία με τον κατάλογο εφαρμογών σας επιτρέπει να συμπεριλάβετε και να οργανώσετε αρχεία σελίδας για μια συγκεκριμένη διαδρομή σε έναν αποκλειστικό φάκελο.

Σε αυτόν τον κατάλογο διαδρομής, μπορείτε να συμπεριλάβετε α φόρτωση.js αρχείο, το οποίο το Next.js θα χρησιμοποιήσει στη συνέχεια ως εναλλακτικό στοιχείο για να εμφανίσει τη διεπαφή χρήστη φόρτωσης πριν αποδώσει το θυγατρικό στοιχείο με τα δεδομένα του.

Τώρα, ας ενσωματώσουμε το React Suspense στο Next.js 13 δημιουργώντας μια δοκιμαστική εφαρμογή To-Do.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό GitHub αποθήκη.

Δημιουργήστε ένα έργο Next.js 13

Θα δημιουργήσετε μια απλή εφαρμογή που θα φέρει μια λίστα με τις υποχρεώσεις από το DummyJSON API τελικό σημείο. Για να ξεκινήσετε, εκτελέστε την παρακάτω εντολή για να εγκαταστήσετε το Next.js 13.

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

Καθορίστε μια διαδρομή Todos

μεσα στην src/app κατάλογο, δημιουργήστε έναν νέο φάκελο και ονομάστε τον Todos. Μέσα σε αυτόν τον φάκελο, προσθέστε έναν νέο page.js αρχείο και συμπεριλάβετε τον παρακάτω κώδικα.

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;

Η ασύγχρονη συνάρτηση, Todos, ανακτά μια λίστα εργασιών από το DummyJSON API. Στη συνέχεια, χαρτογραφείται μέσω της σειράς των ανακτημένων εργασιών για να αποδώσει μια λίστα εργασιών στη σελίδα του προγράμματος περιήγησης.

Επιπλέον, ο κώδικας περιλαμβάνει ένα ασύγχρονο Περίμενε συνάρτηση που προσομοιώνει μια καθυστέρηση, δημιουργώντας ένα σενάριο που θα επιτρέψει σε έναν χρήστη να δει μια διεπαφή χρήστη φόρτωσης για μια συγκεκριμένη διάρκεια πριν εμφανίσει τις ανακτημένες εργασίες.

Σε μια πιο ρεαλιστική περίπτωση χρήσης. αντί για προσομοίωση καθυστέρησης, καταστάσεις όπως η επεξεργασία δραστηριοτήτων εντός εφαρμογών, η ανάκτηση δεδομένων από βάσεις δεδομένων, καταναλώνοντας τα API, ή ακόμα και αργοί χρόνοι απόκρισης API θα προκαλούσαν ορισμένες σύντομες καθυστερήσεις.

Ενσωματώστε το React Suspense στην εφαρμογή Next.js

Ανοιξε το app/layout.js αρχείο και ενημερώστε τον κώδικα boilerplate 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>
 )
}

ο app/layout.js αρχείο στο Next.js 13 χρησιμεύει ως ένα κεντρικό στοιχείο διάταξης που καθορίζει τη συνολική δομή και συμπεριφορά της διάταξης της εφαρμογής. Σε αυτή την περίπτωση, περνώντας το παιδιά στήριγμα στο Αγωνία στοιχείο, διασφαλίζει ότι η διάταξη γίνεται ένα περιτύλιγμα για ολόκληρο το περιεχόμενο της εφαρμογής.

ο Αγωνία συστατικό θα εμφανίσει το Φόρτωση στοιχείο ως εναλλακτικό, ενώ τα θυγατρικά στοιχεία φορτώνουν το περιεχόμενό τους ασύγχρονα. υποδεικνύοντας στον χρήστη ότι γίνεται ανάκτηση ή επεξεργασία περιεχομένου στο παρασκήνιο.

Ενημερώστε το αρχείο διαδρομής Home

Ανοιξε το app/page.js αρχείο, διαγράψτε τον κώδικα Boilerplate Next.js και προσθέστε τον παρακάτω κώδικα.

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;

Δημιουργήστε το Αρχείο loading.js

Τέλος, προχωρήστε και δημιουργήστε ένα φόρτωση.js αρχείο μέσα στο app/Todos Ευρετήριο. Μέσα σε αυτό το αρχείο, προσθέστε τον παρακάτω κώδικα.

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

Προσθήκη Modern Spinners στο Loading UI Component

Το στοιχείο διεπαφής χρήστη φόρτωσης που δημιουργήσατε είναι πολύ βασικό. μπορείτε προαιρετικά να επιλέξετε να προσθέσετε οθόνες σκελετού. Εναλλακτικά, μπορείτε να δημιουργήσετε και να διαμορφώσετε προσαρμοσμένα στοιχεία φόρτωσης χρησιμοποιώντας το Tailwind CSS στην εφαρμογή Next.js. Στη συνέχεια, προσθέστε φιλικά προς το χρήστη κινούμενα σχέδια φόρτωσης όπως spinner που παρέχονται από πακέτα όπως π.χ React Spinners.

Για να χρησιμοποιήσετε αυτό το πακέτο, προχωρήστε και εγκαταστήστε το στο έργο σας.

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;

Τώρα, η διεπαφή χρήστη φόρτωσης θα εμφανίσει ένα μήνυμα φόρτωσης και θα αποδώσει μια περιστρεφόμενη κίνηση περιστρεφόμενης γραμμής για να υποδείξει τη συνεχιζόμενη επεξεργασία κατά την ανάκτηση δεδομένων Todos.

Βελτιώστε την εμπειρία χρήστη με τη φόρτωση διεπαφής χρήστη

Η ενσωμάτωση διεπαφής χρήστη φόρτωσης στις εφαρμογές Ιστού σας μπορεί να βελτιώσει σημαντικά την εμπειρία χρήστη. Παρέχοντας στους χρήστες οπτικές ενδείξεις κατά τη διάρκεια ασύγχρονων λειτουργιών, μπορείτε να ελαχιστοποιήσετε αποτελεσματικά τις ανησυχίες τους και τυχόν αβεβαιότητες και, κατά συνέπεια, να μεγιστοποιήσετε τη δέσμευσή τους.