Kasutajaliideste ja visuaalsete elementide laadimine on veebi- ja mobiilirakenduste olulised komponendid; nad mängivad keskset rolli kasutajakogemuse ja kaasatuse suurendamisel. Ilma selliste näpunäideteta võivad kasutajad olla hämmingus ja ebakindlad, kas rakendus töötab korralikult, kas nad käivitasid õiged toimingud või kas nende toiminguid töödeldakse.

Pakkudes kasutajatele erinevaid visuaalseid näpunäiteid, mis näitavad käimasolevat töötlemist, saate tõhusalt leevendada mis tahes vormis ebakindlus ja frustratsioon, mis lõpuks takistab neid rakendusest enneaegselt lahkumast.

Kasutajaliidese laadimise mõju jõudlusele ja kasutajakogemusele

Jakob Nielseni kümme kasutajaliidese disaini heuristikat rõhutavad, kui oluline on tagada süsteemi hetkeolek lõppkasutajatele nähtavaks. See põhimõte tõstab esile vajaduse kasutajaliidese komponentide, näiteks kasutajaliidese laadimise ja muu tagasiside kasutajaliidese järele elemendid, et anda kasutajatele viivitamatult asjakohast tagasisidet käimasolevate protsesside kohta ja nõutud piires ajaraam.

Kasutajaliidese laadimine mängib rakenduste üldise jõudluse ja kasutuskogemuse kujundamisel keskset rolli. Toimivuse seisukohalt võib tõhusate laadimisekraanide rakendamine oluliselt suurendada veebirakenduse kiirust ja reageerimisvõimet.

Ideaalis võimaldab laadimisliidese tõhus kasutamine sisu asünkroonset laadimist – see hoiab ära kogu lehe külmumise, kui teatud komponendid laaditakse taustal; sisuliselt sujuvama sirvimiskogemuse loomine.

Lisaks, pakkudes selget visuaalset teavet käimasolevate protsesside kohta, ootavad kasutajad tõenäolisemalt kannatlikult sisu allalaadimist.

React Suspense'iga alustamine failis Next.js 13

Põnevus on Reacti komponent, mis haldab taustal töötavaid asünkroonseid toiminguid, näiteks andmete toomist. Lihtsamalt öeldes võimaldab see komponent teil renderdada varukomponenti, kuni kavandatud alamkomponent ühendab ja laadib vajalikud andmed.

Siin on näide sellest, kuidas Suspense töötab. Oletame, et teil on komponent, mis hangib andmeid API-st.

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

Suspense kuvab Laadimine komponent kuni sisu Todos komponent lõpetab laadimise ja on renderdamiseks valmis. Siin on Suspense'i süntaks selle saavutamiseks:

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

 </Suspense>
 </>
 );}

Next.js 13 toetab React Suspense'i

Next.js 13 lisas Suspense'i toe oma rakenduste kataloogi funktsiooni kaudu. Sisuliselt rakenduste kataloogiga töötamine võimaldab lisada ja korraldada konkreetse marsruudi lehefaile spetsiaalsesse kausta.

Sellesse marsruudikataloogi saate lisada a loading.js fail, mida Next.js kasutab seejärel varukomponendina laadimisliidese kuvamiseks enne alamkomponendi koos andmetega renderdamist.

Nüüd integreerime React Suspense'i programmi Next.js 13, luues demo-To-Do-rakenduse.

Selle projekti koodi leiate sellest GitHub hoidla.

Looge Next.js 13 projekt

Loote lihtsa rakenduse, mis hangib ülesannete loendi saidilt DummyJSON API lõpp-punkt. Alustamiseks käivitage Next.js 13 installimiseks allolev käsk.

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

Määrake Todose marsruut

Sees src/app kataloogi, looge uus kaust ja andke sellele nimi Todos. Lisage sellesse kausta uus page.js faili ja lisage allolev kood.

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;

asünkroonne funktsioon, Todos, toob DummyJSON API-st ülesannete loendi. Seejärel kaardistab see toodud ülesannete massiivi, et kuvada brauseri lehel ülesannete loend.

Lisaks sisaldab kood asünkroonset oota funktsioon, mis simuleerib viivitust, luues stsenaariumi, mis võimaldab kasutajal enne toodud ülesannete kuvamist teatud aja jooksul näha laadimisliidest.

Realistlikumal kasutusjuhul; selle asemel, et simuleerida viivitust, on sellised olukorrad nagu töötlemistoimingud rakendustes, andmete toomine andmebaasidest, API-de tarbiminevõi isegi aeglased API reageerimisajad põhjustaksid mõningaid viivitusi.

Integreerige React Suspense rakendusse Next.js

Ava app/layout.js faili ja värskendage koodi Next.js järgmise koodiga.

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 Next.js 13 fail toimib keskse paigutuskomponendina, mis määrab rakenduse paigutuse üldise struktuuri ja käitumise. Sel juhul möödudes lapsed toetada Põnevus komponent, tagab, et küljendus muutub kogu rakenduse sisu ümbriseks.

The Põnevus komponent kuvab Laadimine komponendina tagavarana, kui alamkomponendid laadivad oma sisu asünkroonselt; mis näitab kasutajale, et sisu tuuakse või töödeldakse taustal.

Värskendage kodutee faili

Ava app/page.js kustutage kood Next.js ja lisage allolev kood.

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;

Looge fail loading.js

Lõpuks jätkake ja looge a loading.js faili sees rakendus/ülesanded kataloog. Lisage selle faili sisse allolev kood.

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

Kaasaegsete keerurite lisamine kasutajaliidese laadimiskomponendile

Teie loodud kasutajaliidese laadimiskomponent on väga lihtne; saate soovi korral lisada skeletiekraane. Teise võimalusena saate luua ja stiilida kohandatud laadimiskomponente kasutades Tailwind CSS-i rakenduses Next.js. Seejärel lisage kasutajasõbralikud laadimisanimatsioonid, nagu spinnerid, mida pakuvad sellised paketid nagu Reageerimiskeerutajad.

Selle paketi kasutamiseks installige see oma projekti.

npm install react-loader-spinner --save

Järgmisena värskendage oma loading.js faili järgmiselt:

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

Nüüd kuvab laadimisliides laadimisteate ja renderdab pöörlevate joontega keerutava animatsiooni, mis näitab Todose andmete toomise ajal käimasolevat töötlemist.

Parandage kasutajakogemust kasutajaliidese laadimisega

Laadimisliidese lisamine veebirakendustesse võib kasutajakogemust märkimisväärselt parandada. Pakkudes kasutajatele asünkroonsete toimingute ajal visuaalseid näpunäiteid, saate tõhusalt vähendada nende muresid ja ebakindlust ning seeläbi maksimeerida nende seotust.