A felhasználói felületek és a vizuális elemek betöltése fontos összetevők a webes és mobilalkalmazásokban; kulcsszerepet játszanak a felhasználói élmény és elköteleződés javításában. Ilyen jelzések nélkül a felhasználók értetlenül és bizonytalanokká válhatnak azzal kapcsolatban, hogy az alkalmazás megfelelően működik-e, hogy a megfelelő műveleteket indították-e el, vagy hogy a műveleteiket feldolgozzák-e.

Ha a felhasználókat különféle vizuális jelzésekkel látja el, amelyek jelzik a folyamatban lévő feldolgozást, akkor hatékonyan csökkentheti a hatást a bizonytalanság és a frusztráció bármilyen formája – végső soron elriasztja őket attól, hogy idő előtt kilépjenek az alkalmazásból.

A felhasználói felületek betöltésének hatása a teljesítményre és a felhasználói élményre

Jakob Nielsen tíz heurisztikája a felhasználói felület tervezésére hangsúlyozza annak fontosságát, hogy a végfelhasználók számára látható legyen a rendszer aktuális állapota. Ez az elv rávilágít a felhasználói felület összetevőire, például a felhasználói felületek betöltésére és más visszacsatolási felületekre elemeket, hogy azonnal megfelelő visszajelzést adjon a felhasználóknak a folyamatban lévő folyamatokról és a szükséges kereteken belül időkeret.

A felhasználói felületek betöltése döntő szerepet játszik az alkalmazások általános teljesítményének és felhasználói élményének alakításában. Teljesítmény szempontjából a hatékony betöltési képernyők alkalmazása jelentősen növelheti a webalkalmazások sebességét és válaszkészségét.

Ideális esetben a betöltési felhasználói felületek hatékony kihasználása lehetővé teszi az aszinkron tartalombetöltést – ez megakadályozza, hogy a teljes oldal lefagyjon, miközben bizonyos összetevők a háttérben töltődnek be; lényegében simább böngészési élményt teremtve.

Ezenkívül a folyamatban lévő folyamatok egyértelmű vizuális jelzése révén a felhasználók nagyobb valószínűséggel várják a tartalom visszakeresését.

A React Suspense használatának megkezdése a Next.js 13-ban

Suspense egy React összetevő, amely a háttérben futó aszinkron műveleteket kezeli, például az adatlekérést. Egyszerűen fogalmazva, ez az összetevő lehetővé teszi egy tartalék komponens előállítását mindaddig, amíg a kívánt gyermekkomponens fel nem szereli és betölti a szükséges adatokat.

Íme egy példa a Suspense működésére. Tételezzük fel, hogy van egy összetevője, amely adatokat kér le egy API-ból.

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

Suspense megjeleníti a Betöltés komponens tartalmáig a Todos a komponens betöltése befejeződött, és készen áll a renderelésre. Íme a Suspense szintaxis ennek eléréséhez:

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

 </Suspense>
 </>
 );}

A Next.js 13 támogatja a React Suspense funkciót

A Next.js 13 támogatja a Suspense-t az alkalmazáskönyvtár funkcióján keresztül. Lényegében, az alkalmazáskönyvtárral dolgozik lehetővé teszi egy adott útvonalhoz tartozó oldalfájlok felvételét és rendszerezését egy dedikált mappában.

Ebben az útvonalkönyvtárban szerepelhet a loading.js fájl, amelyet a Next.js tartalék komponensként használ a betöltési felhasználói felület megjelenítéséhez, mielőtt az alárendelt összetevőt az adatokkal együtt rendereli.

Most integráljuk a React Suspense-t a Next.js 13-ba egy bemutató To-Do alkalmazás létrehozásával.

A projekt kódja megtalálható benne GitHub adattár.

Hozzon létre egy Next.js 13 projektet

Egy egyszerű alkalmazást fog készíteni, amely lekéri a teendők listáját a DummyJSON API végpont. A kezdéshez futtassa az alábbi parancsot a Next.js 13 telepítéséhez.

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

Határozzon meg egy Todos útvonalat

Benne src/app könyvtárba, hozzon létre egy új mappát, és nevezze el Todos. Ebben a mappában adjon hozzá egy újat page.js fájlt, és mellékelje az alábbi kódot.

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;

Az aszinkron funkció, Todos, lekéri a teendők listáját a DummyJSON API-ból. Ezután áttérképezi a lekért teendők tömbjét, hogy megjelenítse a teendők listáját a böngésző oldalon.

Ezenkívül a kód tartalmaz egy aszinkront várjon funkció, amely a késleltetést szimulálja, létrehozva egy olyan forgatókönyvet, amely lehetővé teszi a felhasználó számára, hogy egy meghatározott ideig lásson egy betöltési felhasználói felületet, mielőtt megjelenítené a lekért teendőket.

Reálisabb felhasználási esetben; a késés szimulálása helyett olyan helyzetek, mint például az alkalmazásokon belüli feldolgozási tevékenységek, adatok lekérése adatbázisokból, az API-k fogyasztása, vagy akár a lassú API válaszidők rövid késéseket okoznának.

Integrálja a React Suspense-t a Next.js alkalmazásba

Nyissa meg a app/layout.js fájlt, és frissítse a sablont Next.js kódot a következő kóddal.

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

A app/layout.js A Next.js 13-ban található fájl központi elrendezési összetevőként szolgál, amely meghatározza az alkalmazás elrendezésének általános szerkezetét és viselkedését. Ebben az esetben a gyermekek támasz a Suspense komponens, biztosítja, hogy az elrendezés az alkalmazás teljes tartalmának burkolójává váljon.

A Suspense komponens megjeleníti a Betöltés komponens tartalékként, miközben az utódkomponensek aszinkron módon töltik be tartalmukat; jelzi a felhasználónak, hogy a tartalom lekérése vagy feldolgozása folyamatban van a háttérben.

Frissítse a Home Route fájlt

Nyissa meg a app/page.js fájlt, törölje a sablont Next.js kódot, és adja hozzá az alábbi kódot.

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;

Hozd létre a loading.js fájlt

Végül folytassa, és hozzon létre a loading.js fájl belsejében app/Todos Könyvtár. Adja hozzá az alábbi kódot ebben a fájlban.

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

Modern Spinnerek hozzáadása a kezelőfelület betöltése komponenshez

Az Ön által létrehozott felhasználói felület betöltési összetevője nagyon egyszerű; opcionálisan kiválaszthatja a képernyővázak hozzáadását. Alternatív megoldásként egyéni betöltési összetevőket is létrehozhat és stílusozhat a Tailwind CSS használatával a Next.js alkalmazásban. Ezután adjon hozzá felhasználóbarát betöltési animációkat, például pörgetőket, amelyeket olyan csomagok biztosítanak, mint pl React Spinners.

A csomag használatához telepítse a projektbe.

npm install react-loader-spinner --save

Ezután frissítse loading.js fájl a következőképpen:

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

Most a betöltési felhasználói felület egy betöltési üzenetet jelenít meg, és egy forgó vonalpörgető animációt jelenít meg, jelezve a folyamatban lévő feldolgozást a Todos adatok lekérése közben.

Javítsa a felhasználói élményt a felhasználói felületek betöltésével

A betöltő felhasználói felületek webalkalmazásaiba való beépítése jelentősen javíthatja a felhasználói élményt. Ha vizuális jelzéseket ad a felhasználóknak az aszinkron műveletek során, hatékonyan minimalizálhatja aggodalmaikat és minden bizonytalanságot, és ennek következtében maximalizálhatja elkötelezettségüket.