Načítavanie používateľských rozhraní a vizuálnych prvkov sú dôležitými komponentmi webových a mobilných aplikácií; zohrávajú kľúčovú úlohu pri zlepšovaní používateľskej skúsenosti a interakcie. Bez takýchto podnetov môžu byť používatelia zmätení a neistí, či aplikácia funguje správne, či spustili správne akcie alebo či sa ich akcie spracúvajú.

Tým, že používateľom poskytnete rôzne vizuálne podnety, ktoré naznačujú prebiehajúce spracovanie, môžete to účinne zmierniť akúkoľvek formu neistoty a frustrácie – čo ich v konečnom dôsledku odradí od predčasného ukončenia aplikácie.

Vplyv načítania používateľských rozhraní na výkon a používateľskú skúsenosť

Desať heuristiek Jakoba Nielsena pre návrh používateľského rozhrania zdôrazňuje dôležitosť zabezpečenia toho, aby bol aktuálny stav systému viditeľný pre koncových používateľov. Tento princíp zdôrazňuje potrebu komponentov používateľského rozhrania, ako sú používateľské rozhrania načítania a iné používateľské rozhranie so spätnou väzbou prvky na rýchle poskytnutie vhodnej spätnej väzby používateľom, o prebiehajúcich procesoch a v rámci požadovaného časový rámec.

Načítavacie používateľské rozhrania zohrávajú kľúčovú úlohu pri formovaní celkového výkonu a používateľskej skúsenosti s aplikáciami. Z hľadiska výkonu môže implementácia efektívnych obrazoviek načítania výrazne zvýšiť rýchlosť a odozvu webovej aplikácie.

V ideálnom prípade efektívne využitie používateľských rozhraní na načítanie umožňuje asynchrónne načítanie obsahu – to zabraňuje zamrznutiu celej stránky, zatiaľ čo sa na pozadí načítavajú konkrétne komponenty; v podstate vytvára plynulejší zážitok z prehliadania.

Okrem toho, tým, že používatelia ponúkajú jasnú vizuálnu indikáciu prebiehajúcich procesov, s väčšou pravdepodobnosťou budú trpezlivo čakať na získanie obsahu.

Začíname s React Suspense v Next.js 13

Napätie je komponent React, ktorý riadi asynchrónne operácie bežiace na pozadí, ako je napríklad načítanie údajov. Jednoducho povedané, tento komponent vám umožňuje vykresliť záložný komponent, kým sa zamýšľaný podradený komponent nepripojí a nenačíta požadované údaje.

Tu je príklad toho, ako funguje Suspense. Predpokladajme, že máte komponent, ktorý načítava údaje z API.

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

Napätie zobrazí Načítava komponentu až do obsahu Todos komponent dokončí načítanie a je pripravený na vykreslenie. Tu je syntax Suspense na dosiahnutie tohto cieľa:

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

 </Suspense>
 </>
 );}

Next.js 13 Podporuje React Suspense

Next.js 13 pridal podporu pre Suspense prostredníctvom funkcie adresára aplikácií. v podstate prácu s adresárom aplikácie umožňuje zahrnúť a usporiadať stránkovacie súbory pre konkrétnu trasu v rámci vyhradeného priečinka.

Do tohto adresára trasy môžete zahrnúť a načítava sa.js súbor, ktorý Next.js potom použije ako záložný komponent na zobrazenie používateľského rozhrania načítania pred vykreslením podradeného komponentu s jeho údajmi.

Teraz integrujme React Suspense do Next.js 13 vytvorením ukážkovej aplikácie To-Do.

Kód tohto projektu nájdete v ňom GitHub Úložisko.

Vytvorte projekt Next.js 13

Vytvoríte si jednoduchú aplikáciu, ktorá načíta zoznam úloh z DummyJSON API koncový bod. Ak chcete začať, spustite príkaz uvedený nižšie a nainštalujte Next.js 13.

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

Definujte trasu úloh

Vnútri src/aplikácia adresár, vytvorte nový priečinok a pomenujte ho Todos. Do tohto priečinka pridajte nový page.js súbor a zahrňte nižšie uvedený kód.

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;

Asynchrónna funkcia, Todos, načíta zoznam úloh z rozhrania DummyJSON API. Potom mapuje cez pole načítaných úloh, aby vykreslil zoznam úloh na stránke prehliadača.

Okrem toho kód obsahuje asynchrónny počkaj funkcia, ktorá simuluje oneskorenie, čím sa vytvorí scenár, ktorý umožní používateľovi vidieť používateľské rozhranie načítania počas konkrétnej doby pred zobrazením načítaných úloh.

V realistickejšom prípade použitia; namiesto simulácie oneskorenia sa môžu použiť situácie, ako sú činnosti spracovania v rámci aplikácií, získavanie údajov z databáz, spotrebúvajú APIalebo dokonca pomalé časy odozvy API by spôsobili krátke oneskorenia.

Integrujte React Suspense do aplikácie Next.js

Otvor app/layout.js súbor a aktualizujte štandardný kód Next.js nasledujúcim kódom.

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 súbor v Next.js 13 slúži ako centrálny komponent rozloženia, ktorý definuje celkovú štruktúru a správanie rozloženia aplikácie. V tomto prípade absolvovanie deti podpera k Napätie zaisťuje, že rozloženie sa stane obalom pre celý obsah aplikácie.

The Napätie komponent zobrazí Načítava komponent ako záložný, zatiaľ čo podradené komponenty načítavajú svoj obsah asynchrónne; indikujúce používateľovi, že obsah sa načítava alebo spracováva na pozadí.

Aktualizujte súbor domovskej trasy

Otvor app/page.js súbor, odstráňte štandardný kód Next.js a pridajte kód nižšie.

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;

Vytvorte súbor loading.js

Nakoniec pokračujte a vytvorte a načítava sa.js súbor vnútri aplikácia/Úlohy adresár. Do tohto súboru pridajte nižšie uvedený kód.

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

Pridanie moderných spinnerov do komponentu načítavacieho používateľského rozhrania

Komponent používateľského rozhrania, ktorý ste vytvorili, je veľmi jednoduchý; voliteľne sa môžete rozhodnúť pridať skeletové obrazovky. Prípadne môžete vytvoriť a upraviť vlastné komponenty načítania pomocou CSS Tailwind v aplikácii Next.js. Potom pridajte užívateľsky prívetivé animácie načítania, ako sú spinnery poskytované balíkmi, ako napr Reagovať Spinnery.

Ak chcete použiť tento balík, pokračujte a nainštalujte ho do svojho projektu.

npm install react-loader-spinner --save

Ďalej aktualizujte svoj načítava sa.js súbor takto:

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

Teraz používateľské rozhranie načítania zobrazí správu o načítaní a vykreslí animáciu rotujúceho riadku, ktorá indikuje prebiehajúce spracovanie pri načítavaní údajov Todos.

Zlepšite používateľskú skúsenosť s načítaním používateľských rozhraní

Začlenenie používateľských rozhraní na načítanie do vašich webových aplikácií môže výrazne zlepšiť používateľskú skúsenosť. Poskytnutím vizuálnych podnetov používateľom počas asynchrónnych operácií môžete efektívne minimalizovať ich obavy a akékoľvek neistoty a následne maximalizovať ich zapojenie.