Lastegrensesnitt og visuelle elementer er viktige komponenter i nett- og mobilapplikasjoner; de spiller en sentral rolle i å forbedre brukeropplevelsen og engasjementet. Uten slike signaler kan brukere bli forvirret og usikre på om applikasjonen fungerer som den skal, om de utløste de riktige handlingene, eller om handlingene deres blir behandlet.

Ved å gi brukere ulike visuelle signaler som indikerer pågående behandling, kan du effektivt redusere enhver form for usikkerhet og frustrasjon – som til slutt avskrekker dem fra å forlate programmet for tidlig.

Innvirkning av innlasting av brukergrensesnitt på ytelse og brukeropplevelse

Jakob Nielsens ti heuristikker for design av brukergrensesnitt understreker viktigheten av å sikre at gjeldende systemstatus er synlig for sluttbrukere. Dette prinsippet fremhever behovet for brukergrensesnittkomponenter som lasting av brukergrensesnitt og andre tilbakemeldingsgrensesnitt elementer for å raskt gi brukerne passende tilbakemeldinger, om pågående prosesser, og innenfor det som kreves tidsramme.

Lastegrensesnitt spiller en sentral rolle i å forme den generelle ytelsen og brukeropplevelsen til applikasjoner. Fra et ytelsesperspektiv kan implementering av effektive lasteskjermer forbedre en nettapplikasjons hastighet og respons betraktelig.

Ideelt sett muliggjør effektiv bruk av innlastingsgrensesnitt for asynkron innlasting av innhold – dette forhindrer at hele siden fryser mens spesifikke komponenter lastes inn i bakgrunnen; i hovedsak skaper en jevnere nettleseropplevelse.

Videre, ved å tilby en klar visuell indikasjon på pågående prosesser, er det mer sannsynlig at brukere tålmodig venter på innholdshenting.

Komme i gang med React Suspense i Next.js 13

Spenning er en React-komponent som administrerer asynkrone operasjoner som kjører i bakgrunnen, for eksempel datahenting. Enkelt sagt lar denne komponenten deg gjengi en reservekomponent til den tiltenkte underordnede komponenten monterer og laster inn de nødvendige dataene.

Her er et eksempel på hvordan Suspense fungerer. La oss anta at du har en komponent som henter data fra et API.

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

Suspense vil vise Laster komponent til innholdet i Todos komponenten fullfører lasting og er klar for gjengivelse. Her er suspense-syntaksen for å oppnå dette:

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

 </Suspense>
 </>
 );}

Next.js 13 støtter React Suspense

Next.js 13 la til støtte for Suspense gjennom appkatalogfunksjonen. I bunn og grunn, arbeider med appkatalogen lar deg inkludere og organisere sidefiler for en bestemt rute i en dedikert mappe.

I denne rutekatalogen kan du inkludere en loading.js fil, som Next.js deretter vil bruke som reservekomponent for å vise innlastingsgrensesnittet før den gjengir den underordnede komponenten med dens data.

La oss nå integrere React Suspense i Next.js 13 ved å bygge en demo To-Do-applikasjon.

Du kan finne dette prosjektets kode i sin GitHub oppbevaringssted.

Opprett et Next.js 13-prosjekt

Du vil bygge en enkel applikasjon som henter en liste over gjøremål fra DummyJSON API endepunkt. For å komme i gang, kjør kommandoen nedenfor for å installere Next.js 13.

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

Definer en Todos-rute

Inne i src/app katalog, opprett en ny mappe og navngi den Todos. Legg til en ny i denne mappen side.js fil, og ta med koden nedenfor.

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;

Den asynkrone funksjonen, Todos, henter en liste over gjøremål fra DummyJSON API. Den kartlegger deretter utvalget av hentede gjøremål for å gjengi en liste over gjøremål på nettlesersiden.

I tillegg inkluderer koden en asynkron vente funksjon som simulerer en forsinkelse, og skaper et scenario som lar en bruker se et lastegrensesnitt for en bestemt varighet før de hentede gjøremålene vises.

I en mer realistisk brukssak; i stedet for å simulere en forsinkelse, situasjoner som behandling av aktiviteter i applikasjoner, henting av data fra databaser, forbruker API-ene, eller til og med langsomme API-responstider vil føre til noen korte forsinkelser.

Integrer React Suspense i Next.js-applikasjonen

Åpne app/layout.js fil og oppdater boilerplate Next.js-koden med følgende kode.

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

De app/layout.js filen i Next.js 13 fungerer som en sentral layoutkomponent som definerer den generelle strukturen og oppførselen til applikasjonens layout. I dette tilfellet passerer barn støtte til Spenning komponent, sikrer at oppsettet blir en omslag for hele applikasjonens innhold.

De Spenning komponenten vil vise Laster komponent som reserve mens de underordnede komponentene laster inn innholdet asynkront; som indikerer for brukeren at innhold hentes eller behandles i bakgrunnen.

Oppdater hjemmerutefilen

Åpne app/page.js fil, slett boilerplate Next.js-koden og legg til koden nedenfor.

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;

Opprett filen loading.js

Til slutt, fortsett og lag en loading.js fil inne i app/Todos katalog. Legg til koden nedenfor i denne filen.

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

Legge til moderne spinnere til komponenten for innlastingsgrensesnittet

Lastegrensesnittet du opprettet er veldig grunnleggende; du kan valgfritt velge å legge til skjelettskjermer. Alternativt kan du lage og style tilpassede lastekomponenter ved å bruke Tailwind CSS i Next.js-applikasjonen. Deretter legger du til brukervennlige lasteanimasjoner som spinnere levert av pakker som Reager Spinners.

For å bruke denne pakken, fortsett og installer den i prosjektet ditt.

npm install react-loader-spinner --save

Deretter oppdaterer du din loading.js fil som følger:

"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å vil lastegrensesnittet vise en lastemelding og gjengi en roterende linjers spinner-animasjon for å indikere pågående behandling mens Todos-data hentes.

Forbedre brukeropplevelsen med lasting av brukergrensesnitt

Å inkludere innlastingsgrensesnitt i nettapplikasjonene dine kan forbedre brukeropplevelsen betydelig. Ved å gi brukerne visuelle signaler under asynkrone operasjoner, kan du effektivt minimere bekymringene og eventuelle usikkerhetsmomenter, og følgelig maksimere deres engasjement.