Učitavanje korisničkih sučelja i vizualnih elemenata važne su komponente u web i mobilnim aplikacijama; igraju ključnu ulogu u poboljšanju korisničkog iskustva i angažmana. Bez takvih znakova, korisnici bi mogli postati zbunjeni i nesigurni oko toga radi li aplikacija ispravno, jesu li pokrenuli prave radnje ili se njihove radnje obrađuju.

Dajući korisnicima različite vizualne znakove koji ukazuju na obradu koja je u tijeku, možete učinkovito ublažiti bilo kakav oblik neizvjesnosti i frustracije - što ih u konačnici odvraća od prijevremenog napuštanja aplikacije.

Utjecaj učitavanja korisničkih sučelja na izvedbu i korisničko iskustvo

Deset heuristika Jakoba Nielsena za dizajn korisničkog sučelja naglašava važnost osiguravanja da je trenutni status sustava vidljiv krajnjim korisnicima. Ovo načelo naglašava potrebu za komponentama korisničkog sučelja kao što su korisničko sučelje za učitavanje i druga sučelja za povratne informacije elemenata za promptno pružanje odgovarajućih povratnih informacija korisnicima o procesima koji su u tijeku, a unutar zahtijevanog vremenski okvir.

Učitavanje korisničkih sučelja igra ključnu ulogu u oblikovanju ukupne izvedbe i korisničkog iskustva aplikacija. Iz perspektive performansi, implementacija učinkovitih zaslona za učitavanje može značajno poboljšati brzinu i odziv web aplikacije.

U idealnom slučaju, učinkovito korištenje korisničkih sučelja za učitavanje omogućuje asinkrono učitavanje sadržaja—ovo sprječava zamrzavanje cijele stranice dok se određene komponente učitavaju u pozadini; u biti, stvaranje glatkog iskustva pregledavanja.

Nadalje, nudeći jasnu vizualnu indikaciju procesa koji su u tijeku, veća je vjerojatnost da će korisnici strpljivo čekati dohvaćanje sadržaja.

Početak rada s React Suspense u Next.js 13

Suspenzija je React komponenta koja upravlja asinkronim operacijama koje se izvode u pozadini, kao što je dohvaćanje podataka. Jednostavno rečeno, ova vam komponenta omogućuje renderiranje zamjenske komponente dok se predviđena podređena komponenta ne montira i učita potrebne podatke.

Evo primjera kako Suspense funkcionira. Pretpostavimo da imate komponentu koja dohvaća podatke iz API-ja.

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

Napetost će prikazati Učitavam komponenta do sadržaja Todos komponenta završava učitavanje i spremna je za renderiranje. Evo sintakse Suspense za postizanje ovoga:

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

 </Suspense>
 </>
 );}

Next.js 13 Podržava React Suspense

Next.js 13 dodao je podršku za Suspense putem značajke imenika aplikacija. U srži, rad s imenikom aplikacija omogućuje vam da uključite i organizirate datoteke stranice za određenu rutu unutar namjenske mape.

Unutar ovog direktorija rute možete uključiti a učitavanje.js datoteku, koju će Next.js zatim koristiti kao zamjensku komponentu za prikaz korisničkog sučelja za učitavanje prije renderiranja podređene komponente sa svojim podacima.

Sada integrirajmo React Suspense u Next.js 13 izgradnjom demo To-Do aplikacije.

Kôd ovog projekta možete pronaći u GitHub spremište.

Napravite projekt Next.js 13

Napravit ćete jednostavnu aplikaciju koja dohvaća popis obaveza iz DummyJSON API krajnja točka. Za početak pokrenite naredbu u nastavku da biste instalirali Next.js 13.

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

Definirajte Todos rutu

Unutar src/aplikacija imenik, stvorite novu mapu i dajte joj naziv Todos. Unutar ove mape dodajte novu stranica.js datoteku i uključite kod u nastavku.

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;

Asinkrona funkcija, Todos, dohvaća popis zadataka iz DummyJSON API-ja. Zatim preslikava niz dohvaćenih zadataka kako bi prikazao popis zadataka na stranici preglednika.

Dodatno, kod uključuje asinkroni čekati funkcija koja simulira odgodu, stvarajući scenarij koji će omogućiti korisniku da vidi korisničko sučelje za učitavanje u određenom trajanju prije prikazivanja dohvaćenih zadataka.

U realističnijem slučaju upotrebe; umjesto simuliranja kašnjenja, situacije kao što su aktivnosti obrade unutar aplikacija, dohvaćanje podataka iz baza podataka, konzumiranje API-ja, ili čak, sporo vrijeme odgovora API-ja uzrokovalo bi kratka kašnjenja.

Integrirajte React Suspense u aplikaciju Next.js

Otvori app/layout.js datoteku i ažurirajte predložak Next.js koda sa sljedećim kodom.

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 datoteka u Next.js 13 služi kao središnja komponenta izgleda koja definira cjelokupnu strukturu i ponašanje izgleda aplikacije. U ovom slučaju, prolazeći djece oslonac za Suspenzija komponenta, osigurava da izgled postane omotač za cijeli sadržaj aplikacije.

The Suspenzija komponenta će prikazati Učitavam komponenta kao zamjena dok komponente dijete asinkrono učitavaju svoj sadržaj; pokazujući korisniku da se sadržaj dohvaća ili obrađuje u pozadini.

Ažurirajte datoteku početne rute

Otvori aplikacija/stranica.js datoteku, izbrišite predložak Next.js koda i dodajte kod u nastavku.

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;

Stvorite datoteku loading.js

Na kraju, samo naprijed i stvorite učitavanje.js datoteka unutar aplikacija/Todos imenik. Unutar ove datoteke dodajte kod u nastavku.

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

Dodavanje modernih spinnera komponenti korisničkog sučelja za učitavanje

Komponenta korisničkog sučelja za učitavanje koju ste izradili vrlo je osnovna; po želji možete odabrati dodavanje kosturnih zaslona. Alternativno, možete stvoriti i stilizirati prilagođene komponente učitavanja koristeći Tailwind CSS u vašoj aplikaciji Next.js. Zatim dodajte animacije učitavanja koje su jednostavne za korištenje poput spinnera koje pružaju paketi kao što su React Spinners.

Da biste koristili ovaj paket, samo naprijed i instalirajte ga u svoj projekt.

npm install react-loader-spinner --save

Zatim ažurirajte svoj učitavanje.js datoteku na sljedeći način:

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

Sada će korisničko sučelje za učitavanje prikazati poruku o učitavanju i prikazati rotirajuću animaciju rotirajućih linija za označavanje obrade u tijeku tijekom dohvaćanja Todos podataka.

Poboljšajte korisničko iskustvo s učitavanjem korisničkih sučelja

Uključivanje korisničkih sučelja za učitavanje u vaše web aplikacije može značajno poboljšati korisničko iskustvo. Omogućavanjem vizualnih znakova korisnicima tijekom asinkronih operacija, možete učinkovito minimizirati njihove brige i sve neizvjesnosti te posljedično maksimalno povećati njihov angažman.