Încărcarea interfețelor de utilizare și a elementelor vizuale sunt componente importante în aplicațiile web și mobile; ele joacă un rol esențial în îmbunătățirea experienței utilizatorului și a implicării. Fără astfel de indicii, utilizatorii ar putea deveni nedumeriți și nesiguri dacă aplicația funcționează corect, dacă au declanșat acțiunile corecte sau dacă acțiunile lor sunt procesate.

Oferind utilizatorilor diverse indicii vizuale care indică procesarea în curs, puteți atenua eficient orice formă de incertitudine și frustrare — în cele din urmă descurajându-i să părăsească prematur aplicația.

Impactul încărcării interfețelor de utilizare asupra performanței și experienței utilizatorului

Cele zece euristici ale lui Jakob Nielsen pentru proiectarea interfeței cu utilizatorul subliniază importanța asigurării că starea curentă a sistemului este vizibilă pentru utilizatorii finali. Acest principiu evidențiază necesitatea componentelor interfeței cu utilizatorul, cum ar fi încărcarea interfețelor de utilizare și alte interfețe de utilizare pentru feedback elemente pentru a oferi prompt utilizatorilor feedback adecvat, despre procesele în desfășurare și în limitele necesare interval de timp.

Interfețele de utilizare de încărcare joacă un rol esențial în modelarea performanței generale și a experienței utilizatorului aplicațiilor. Din punct de vedere al performanței, implementarea unor ecrane de încărcare eficiente poate îmbunătăți semnificativ viteza și capacitatea de răspuns a unei aplicații web.

În mod ideal, utilizarea eficientă a interfețelor de utilizare de încărcare permite încărcarea asincronă a conținutului - acest lucru împiedică înghețarea întregii pagini în timp ce anumite componente se încarcă în fundal; în esență, creând o experiență de navigare mai fluidă.

În plus, oferind o indicație vizuală clară a proceselor în desfășurare, este mai probabil ca utilizatorii să aștepte cu răbdare recuperarea conținutului.

Noțiuni introductive cu React Suspense în Next.js 13

Suspans este o componentă React care gestionează operațiunile asincrone care rulează în fundal, cum ar fi preluarea datelor. Mai simplu spus, această componentă vă permite să redați o componentă de rezervă până când componenta secundară dorită se montează și încarcă datele necesare.

Iată un exemplu despre cum funcționează Suspansul. Să presupunem că aveți o componentă care preia date dintr-un API.

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

Suspansul va afișa Se încarcă componentă până la conținutul Todos componenta termină încărcarea și este gata de randare. Iată sintaxa Suspense pentru a realiza acest lucru:

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

 </Suspense>
 </>
 );}

Next.js 13 acceptă React Suspense

Next.js 13 a adăugat suport pentru Suspense prin caracteristica directorului de aplicații. In esenta, lucrează cu directorul aplicației vă permite să includeți și să organizați fișiere de pagină pentru o anumită rută într-un folder dedicat.

În acest director de rute, puteți include un loading.js fișier, pe care Next.js îl va utiliza apoi ca componentă de rezervă pentru a afișa interfața de utilizare de încărcare înainte de a reda componenta copil cu datele sale.

Acum, să integrăm React Suspense în Next.js 13 prin construirea unei aplicații demonstrative To-Do.

Puteți găsi codul acestui proiect în documentul său GitHub repertoriu.

Creați un proiect Next.js 13

Veți construi o aplicație simplă care preia o listă de sarcini de făcut din DummyJSON API punct final. Pentru a începe, rulați comanda de mai jos pentru a instala Next.js 13.

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

Definiți o rută Todos

În interiorul src/app director, creați un folder nou și denumiți-l Todos. În interiorul acestui folder, adăugați unul nou page.js fișier și includeți codul de mai jos.

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;

Funcția asincronă, Todos, preia o listă cu toate din API-ul DummyJSON. Apoi se mapează prin matricea de toate preluate pentru a reda o listă de toate pe pagina browserului.

În plus, codul include un asincron aștepta funcție care simulează o întârziere, creând un scenariu care va permite unui utilizator să vadă o interfață de utilizare de încărcare pentru o anumită durată înainte de a afișa toate preluate.

Într-un caz de utilizare mai realist; în loc să simuleze o întârziere, situații precum procesarea activităților în cadrul aplicațiilor, preluarea datelor din baze de date, consumând API-urile, sau chiar, timpii de răspuns API lenți ar cauza câteva întârzieri scurte.

Integrați React Suspense în aplicația Next.js

Deschide app/layout.js fișier și actualizați codul boilerplate Next.js cu următorul cod.

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>
 )
}

The app/layout.js fișierul din Next.js 13 servește ca o componentă centrală de aspect care definește structura generală și comportamentul aspectului aplicației. În acest caz, trecerea copii prop la Suspans componentă, asigură aspectul devine un înveliș pentru întregul conținut al aplicației.

The Suspans componenta va afișa Se încarcă componenta ca alternativă în timp ce componentele secundare își încarcă conținutul asincron; indicând utilizatorului că conținutul este preluat sau procesat în fundal.

Actualizați fișierul rută de acasă

Deschide app/page.js fișier, ștergeți codul boilerplate Next.js și adăugați codul de mai jos.

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;

Creați fișierul loading.js

În cele din urmă, continuă și creează un loading.js dosar în interiorul aplicație/Todos director. În interiorul acestui fișier, adăugați codul de mai jos.

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

Adăugarea de spinneri moderni la componenta de încărcare a interfeței de utilizare

Componenta UI de încărcare pe care ați creat-o este foarte simplă; opțional puteți alege să adăugați ecrane schelet. Alternativ, puteți crea și modela componente de încărcare personalizate folosind Tailwind CSS în aplicația dvs. Next.js. Apoi, adăugați animații de încărcare ușor de utilizat, cum ar fi spinnerele furnizate de pachete precum React Spinners.

Pentru a utiliza acest pachet, mergeți mai departe și instalați-l în proiectul dvs.

npm install react-loader-spinner --save

Apoi, actualizați-vă loading.js fișier după cum urmează:

"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;

Acum, interfața de utilizare de încărcare va afișa un mesaj de încărcare și va reda o animație rotativă cu linii rotative pentru a indica procesarea în curs în timpul preluării datelor Todos.

Îmbunătățiți experiența utilizatorului cu interfețele de utilizare de încărcare

Încorporarea interfețelor de utilizare de încărcare în aplicațiile dvs. web poate îmbunătăți semnificativ experiența utilizatorului. Oferind utilizatorilor indicii vizuale în timpul operațiunilor asincrone, le puteți minimiza în mod eficient îngrijorările și orice incertitudini și, în consecință, le puteți maximiza implicarea.