Laddande användargränssnitt och visuella element är viktiga komponenter i webb- och mobilapplikationer; de spelar en avgörande roll för att förbättra användarupplevelsen och engagemanget. Utan sådana signaler kan användare bli förbryllade och osäkra på om programmet fungerar korrekt, om de utlöste rätt åtgärder eller om deras åtgärder bearbetas.

Genom att ge användarna olika visuella ledtrådar som indikerar pågående bearbetning kan du effektivt mildra någon form av osäkerhet och frustration – vilket i slutändan avskräcker dem från att lämna applikationen i förtid.

Inverkan av laddningsgränssnitt på prestanda och användarupplevelse

Jakob Nielsens tio heuristik för design av användargränssnitt understryker vikten av att se till att den nuvarande systemstatusen är synlig för slutanvändarna. Denna princip belyser behovet av komponenter i användargränssnittet som laddningsgränssnitt och andra återkopplingsgränssnitt element för att snabbt ge användarna lämplig feedback, om pågående processer, och inom det som krävs tidsram.

Laddande gränssnitt spelar en avgörande roll för att forma den övergripande prestandan och användarupplevelsen av applikationer. Ur ett prestandaperspektiv kan implementering av effektiva laddningsskärmar avsevärt förbättra en webbapplikations hastighet och lyhördhet.

Helst möjliggör ett effektivt utnyttjande av laddningsgränssnitt för asynkron innehållsladdning – detta förhindrar att hela sidan fryser medan specifika komponenter laddas i bakgrunden; i huvudsak skapar en smidigare webbupplevelse.

Dessutom, genom att erbjuda en tydlig visuell indikation av pågående processer, är det mer sannolikt att användarna tålmodigt väntar på innehållshämtning.

Komma igång med React Suspense i Next.js 13

Spänning är en React-komponent som hanterar asynkrona operationer som körs i bakgrunden, såsom datahämtning. Enkelt uttryckt låter den här komponenten dig göra en reservkomponent tills den avsedda underordnade komponenten monteras och laddar nödvändiga data.

Här är ett exempel på hur Suspense fungerar. Låt oss anta att du har en komponent som hämtar data från ett API.

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

Spänning kommer att visa Läser in komponent tills innehållet i Todos komponenten laddas färdigt och är redo för rendering. Här är spänningssyntaxen för att uppnå detta:

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

 </Suspense>
 </>
 );}

Next.js 13 stöder React Suspense

Next.js 13 lade till stöd för Suspense genom sin appkatalogfunktion. Väsentligen, arbetar med appkatalogen låter dig inkludera och organisera sidfiler för en viss rutt i en dedikerad mapp.

I denna ruttkatalog kan du inkludera en loading.js fil, som Next.js sedan kommer att använda som reservkomponent för att visa laddningsgränssnittet innan den underordnade komponenten renderas med dess data.

Låt oss nu integrera React Suspense i Next.js 13 genom att bygga en demo-att-göra-applikation.

Du kan hitta detta projekts kod i dess GitHub förvaret.

Skapa ett Next.js 13-projekt

Du kommer att bygga en enkel applikation som hämtar en lista över att göra från DummyJSON API slutpunkt. För att komma igång, kör kommandot nedan för att installera Next.js 13.

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

Definiera en Todos-rutt

Inuti src/app katalog, skapa en ny mapp och namnge den Todos. Lägg till en ny i den här mappen page.js fil och inkludera koden nedan.

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 asynkrona funktionen, Todos, hämtar en lista med uppgifter från DummyJSON API. Den kartlägger sedan uppsättningen av hämtade uppgifter för att återge en lista med uppgifter på webbläsarsidan.

Dessutom innehåller koden en asynkron vänta funktion som simulerar en fördröjning, skapar ett scenario som gör att en användare kan se ett laddningsgränssnitt under en viss tid innan de hämtade uppgifterna visas.

I ett mer realistiskt användningsfall; istället för att simulera en fördröjning, situationer som bearbetningsaktiviteter inom applikationer, hämtning av data från databaser, konsumerar API: erna, eller till och med långsamma API-svarstider skulle orsaka några korta förseningar.

Integrera React Suspense i Next.js-applikationen

Öppna app/layout.js fil och uppdatera boilerplate Next.js-koden med följande kod.

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 fungerar som en central layoutkomponent som definierar den övergripande strukturen och beteendet för applikationens layout. I detta fall passerar barn stötta till Spänning komponent, säkerställer att layouten blir ett omslag för hela programmets innehåll.

De Spänning komponent kommer att visa Läser in komponent som reserv medan de underordnade komponenterna laddar sitt innehåll asynkront; indikerar för användaren att innehåll hämtas eller bearbetas i bakgrunden.

Uppdatera Home Route File

Öppna app/page.js fil, ta bort boilerplate Next.js-koden och lägg till koden nedan.

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;

Skapa filen loading.js

Slutligen, fortsätt och skapa en loading.js fil inuti app/Todos katalog. Lägg till koden nedan i den här filen.

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

Lägga till moderna spinnare till komponenten för laddningsgränssnittet

Ladda UI-komponenten du skapade är väldigt grundläggande; du kan valfritt välja att lägga till skelettskärmar. Alternativt kan du skapa och utforma anpassade laddningskomponenter använda Tailwind CSS i din Next.js-applikation. Lägg sedan till användarvänliga laddningsanimationer som spinnare som tillhandahålls av paket som t.ex Reager Spinners.

För att använda detta paket, fortsätt och installera det i ditt projekt.

npm install react-loader-spinner --save

Uppdatera sedan din loading.js fil enligt följande:

"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 kommer laddningsgränssnittet att visa ett laddningsmeddelande och rendera en animering med roterande rader för att indikera pågående bearbetning medan Todos-data hämtas.

Förbättra användarupplevelsen med laddningsgränssnitt

Att integrera laddningsgränssnitt i dina webbapplikationer kan förbättra användarupplevelsen avsevärt. Genom att ge användarna visuella ledtrådar under asynkrona operationer kan du effektivt minimera deras oro och eventuella osäkerheter och följaktligen maximera deras engagemang.