Indlæsningsbrugergrænseflader og visuelle elementer er vigtige komponenter i web- og mobilapplikationer; de spiller en central rolle i at forbedre brugeroplevelsen og engagementet. Uden sådanne signaler kan brugerne blive forvirrede og usikre på, om applikationen fungerer korrekt, om de udløste de rigtige handlinger, eller om deres handlinger bliver behandlet.

Ved at give brugerne forskellige visuelle signaler, der indikerer igangværende behandling, kan du effektivt afbøde enhver form for usikkerhed og frustration – hvilket i sidste ende afholder dem fra at forlade applikationen for tidligt.

Indvirkning af indlæsning af brugergrænseflader på ydeevne og brugeroplevelse

Jakob Nielsens ti heuristika for design af brugergrænseflader understreger vigtigheden af ​​at sikre, at den aktuelle systemstatus er synlig for slutbrugerne. Dette princip fremhæver behovet for brugergrænsefladekomponenter såsom indlæsning af brugergrænseflader og andre feedback-brugergrænseflader elementer for omgående at give brugerne passende feedback, om igangværende processer og inden for det nødvendige tidsramme.

Indlæsningsbrugergrænseflader spiller en central rolle i udformningen af ​​den overordnede ydeevne og brugeroplevelse af applikationer. Fra et ydeevneperspektiv kan implementering af effektive indlæsningsskærme forbedre en webapplikations hastighed og reaktionsevne betydeligt.

Ideelt set giver effektiv udnyttelse af indlæsningsbrugergrænseflader mulighed for asynkron indlæsning af indhold - dette forhindrer hele siden i at fryse, mens specifikke komponenter indlæses i baggrunden; i det væsentlige skaber en mere jævn browsingoplevelse.

Ved at tilbyde en klar visuel indikation af igangværende processer er det desuden mere sandsynligt, at brugere tålmodigt venter på hentning af indhold.

Kom godt i gang med React Suspense i Next.js 13

Spænding er en React-komponent, der styrer asynkrone operationer, der kører i baggrunden, såsom datahentning. Kort sagt giver denne komponent dig mulighed for at gengive en reservekomponent, indtil den tilsigtede underordnede komponent monterer og indlæser de nødvendige data.

Her er et eksempel på, hvordan Suspense fungerer. Lad os antage, at du har en komponent, der henter data fra en 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 Indlæser komponent indtil indholdet af Todos komponent afslutter indlæsning og er klar til gengivelse. Her er suspense-syntaksen for at opnå dette:

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

 </Suspense>
 </>
 );}

Next.js 13 understøtter React Suspense

Next.js 13 tilføjede understøttelse af Suspense gennem sin app-mappefunktion. I det væsentlige, arbejder med app-biblioteket giver dig mulighed for at inkludere og organisere sidefiler for en bestemt rute i en dedikeret mappe.

I denne rutemappe kan du inkludere en loading.js fil, som Next.js derefter vil bruge som reservekomponent til at vise indlæsningsbrugergrænsefladen, før den underordnede komponent gengives med dens data.

Lad os nu integrere React Suspense i Next.js 13 ved at bygge en demo To-Do-applikation.

Du kan finde dette projekts kode i dens GitHub depot.

Opret et Next.js 13-projekt

Du vil bygge en simpel applikation, der henter en liste over gøremål fra DummyJSON API endepunkt. For at komme i gang skal du køre kommandoen nedenfor for at installere Next.js 13.

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

Definer en Todos-rute

Inde i src/app mappe, opret en ny mappe og navngiv den Todos. Tilføj en ny i denne mappe side.js fil, og medtag 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 funktion, Todos, henter en liste over gøremål fra DummyJSON API. Den kortlægger derefter rækken af ​​hentede todos for at gengive en liste over todos på browsersiden.

Derudover inkluderer koden en asynkron vente funktion, der simulerer en forsinkelse, hvilket skaber et scenarie, der giver en bruger mulighed for at se en indlæsnings-UI i en bestemt varighed, før de hentede gøremål vises.

I en mere realistisk use case; i stedet for at simulere en forsinkelse, situationer såsom behandlingsaktiviteter i applikationer, hentning af data fra databaser, forbruge API'erne, eller endda langsomme API-svartider ville forårsage nogle korte forsinkelser.

Integrer React Suspense i Next.js-applikationen

Åbn app/layout.js fil og opdater 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>
 )
}

Det app/layout.js fil i Next.js 13 fungerer som en central layoutkomponent, der definerer den overordnede struktur og opførsel af applikationens layout. I dette tilfælde passerer børn støtte til Spænding komponent, sikrer, at layoutet bliver en indpakning for hele applikationens indhold.

Det Spænding komponent vil vise Indlæser komponent som reserve, mens de underordnede komponenter indlæser deres indhold asynkront; angiver over for brugeren, at indhold hentes eller behandles i baggrunden.

Opdater hjemmerutefilen

Åbn app/page.js fil, slet boilerplate Next.js-koden og tilføj 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;

Opret filen loading.js

Gå endelig videre og opret en loading.js fil inde i app/Todos vejviser. Tilføj koden nedenfor i denne fil.

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

Tilføjelse af moderne spinnere til Loading UI-komponenten

Den indlæsnings-UI-komponent, du oprettede, er meget grundlæggende; du kan valgfrit vælge at tilføje skeletskærme. Alternativt kan du oprette og style tilpassede indlæsningskomponenter ved at bruge Tailwind CSS i din Next.js-applikation. Tilføj derefter brugervenlige indlæsningsanimationer som spinnere leveret af pakker som f.eks Reager Spinners.

For at bruge denne pakke skal du gå videre og installere den i dit projekt.

npm install react-loader-spinner --save

Dernæst skal du opdatere 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;

Nu vil indlæsningsbrugergrænsefladen vise en indlæsningsmeddelelse og gengive en roterende linjers spinner-animation for at angive igangværende behandling, mens Todos-data hentes.

Forbedre brugeroplevelsen med at indlæse brugergrænseflader

Inkorporering af indlæsningsbrugergrænseflader i dine webapplikationer kan forbedre brugeroplevelsen markant. Ved at give brugerne visuelle signaler under asynkrone operationer kan du effektivt minimere deres bekymringer og eventuelle usikkerheder og dermed maksimere deres engagement.