Lade-Benutzeroberflächen und visuelle Elemente sind wichtige Komponenten in Web- und Mobilanwendungen; Sie spielen eine entscheidende Rolle bei der Verbesserung der Benutzererfahrung und des Benutzerengagements. Ohne solche Hinweise könnten Benutzer verwirrt und unsicher sein, ob die Anwendung ordnungsgemäß funktioniert, ob sie die richtigen Aktionen ausgelöst haben oder ob ihre Aktionen verarbeitet werden.

Indem Sie Benutzern verschiedene visuelle Hinweise zur Verfügung stellen, die auf eine laufende Verarbeitung hinweisen, können Sie effektiv Abhilfe schaffen jede Form von Unsicherheit und Frustration – was sie letztendlich davon abhält, die Anwendung vorzeitig zu beenden.

Auswirkungen des Ladens von Benutzeroberflächen auf Leistung und Benutzererfahrung

Jakob Nielsens zehn Heuristiken für das Design von Benutzeroberflächen betonen, wie wichtig es ist, sicherzustellen, dass der aktuelle Systemstatus für Endbenutzer sichtbar ist. Dieses Prinzip unterstreicht die Notwendigkeit von Benutzeroberflächenkomponenten wie Lade-UIs und anderen Feedback-UIs Elemente, um Benutzern zeitnah und im Rahmen der erforderlichen Rückmeldungen zu laufenden Prozessen zu geben Zeitfenster.

Lade-Benutzeroberflächen spielen eine entscheidende Rolle bei der Gestaltung der Gesamtleistung und Benutzererfahrung von Anwendungen. Aus Leistungssicht kann die Implementierung effektiver Ladebildschirme die Geschwindigkeit und Reaktionsfähigkeit einer Webanwendung erheblich verbessern.

Im Idealfall ermöglicht die effektive Nutzung von Lade-UIs das asynchrone Laden von Inhalten. Dadurch wird verhindert, dass die gesamte Seite einfriert, während bestimmte Komponenten im Hintergrund geladen werden. Im Wesentlichen geht es darum, ein reibungsloseres Surferlebnis zu schaffen.

Darüber hinaus ist es durch die klare visuelle Anzeige laufender Prozesse wahrscheinlicher, dass Benutzer geduldig auf den Abruf von Inhalten warten.

Erste Schritte mit React Suspense in Next.js 13

Spannung ist eine React-Komponente, die im Hintergrund ausgeführte asynchrone Vorgänge verwaltet, z. B. das Abrufen von Daten. Einfach ausgedrückt: Mit dieser Komponente können Sie eine Fallback-Komponente rendern, bis die vorgesehene untergeordnete Komponente bereitgestellt wird und die erforderlichen Daten lädt.

Hier ist ein Beispiel dafür, wie Suspense funktioniert. Nehmen wir an, Sie haben eine Komponente, die Daten von einer API abruft.

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

Suspense zeigt das an Wird geladen Komponente, bis der Inhalt der Todos Die Komponente wird geladen und ist zum Rendern bereit. Hier ist die Suspense-Syntax, um dies zu erreichen:

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

 </Suspense>
 </>
 );}

Next.js 13 unterstützt React Suspense

Next.js 13 hat über seine App-Verzeichnisfunktion Unterstützung für Suspense hinzugefügt. Im Wesentlichen, Arbeiten mit dem App-Verzeichnis ermöglicht es Ihnen, Auslagerungsdateien für eine bestimmte Route in einen speziellen Ordner einzuschließen und zu organisieren.

In dieses Routenverzeichnis können Sie eine einfügen Loading.js Datei, die Next.js dann als Fallback-Komponente verwendet, um die Lade-Benutzeroberfläche anzuzeigen, bevor die untergeordnete Komponente mit ihren Daten gerendert wird.

Lassen Sie uns nun React Suspense in Next.js 13 integrieren, indem wir eine Demo-To-Do-Anwendung erstellen.

Den Code dieses Projekts finden Sie in seiner GitHub Repository.

Erstellen Sie ein Next.js 13-Projekt

Sie erstellen eine einfache Anwendung, die eine Liste mit Aufgaben aus dem abruft DummyJSON-API Endpunkt. Führen Sie zunächst den folgenden Befehl aus, um Next.js 13 zu installieren.

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

Definieren Sie eine Todos-Route

Im Inneren src/app Verzeichnis, erstellen Sie einen neuen Ordner und benennen Sie ihn Todos. Fügen Sie in diesem Ordner einen neuen hinzu page.js Datei und fügen Sie den folgenden Code ein.

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;

Die asynchrone Funktion, Todos, ruft eine Liste der Aufgaben von der DummyJSON-API ab. Anschließend wird das Array der abgerufenen Todos zugeordnet, um eine Liste der Todos auf der Browserseite darzustellen.

Darüber hinaus enthält der Code eine asynchrone Funktion Warten Funktion, die eine Verzögerung simuliert und ein Szenario erstellt, das es einem Benutzer ermöglicht, eine Lade-Benutzeroberfläche für eine bestimmte Dauer zu sehen, bevor die abgerufenen Aufgaben angezeigt werden.

In einem realistischeren Anwendungsfall; Anstatt eine Verzögerung zu simulieren, können Situationen wie Verarbeitungsaktivitäten innerhalb von Anwendungen, das Abrufen von Daten aus Datenbanken usw. die APIs verbrauchenoder sogar langsame API-Antwortzeiten würden zu kurzen Verzögerungen führen.

Integrieren Sie React Suspense in die Next.js-Anwendung

Öffne das app/layout.js Datei und aktualisieren Sie den Boilerplate Next.js-Code mit dem folgenden Code.

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

Der app/layout.js Die Datei in Next.js 13 dient als zentrale Layoutkomponente, die die Gesamtstruktur und das Verhalten des Anwendungslayouts definiert. In diesem Fall besteht die Übergabe der Kinder Stütze zum Spannung Die Komponente stellt sicher, dass das Layout zum Wrapper für den gesamten Inhalt der Anwendung wird.

Der Spannung Die Komponente zeigt die an Wird geladen Komponente als Fallback, während die untergeordneten Komponenten ihren Inhalt asynchron laden; Zeigt dem Benutzer an, dass Inhalte im Hintergrund abgerufen oder verarbeitet werden.

Aktualisieren Sie die Heimatroutendatei

Öffne das app/page.js Datei, löschen Sie den Boilerplate-Next.js-Code und fügen Sie den folgenden Code hinzu.

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;

Erstellen Sie die Datei „loading.js“.

Machen Sie abschließend weiter und erstellen Sie eine Loading.js Datei innerhalb der app/Todos Verzeichnis. Fügen Sie in dieser Datei den folgenden Code ein.

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

Hinzufügen moderner Spinner zur Lade-UI-Komponente

Die von Ihnen erstellte Lade-UI-Komponente ist sehr einfach; Sie können optional Skelettbildschirme hinzufügen. Alternativ können Sie benutzerdefinierte Ladekomponenten erstellen und formatieren Verwenden von Tailwind CSS in Ihrer Next.js-Anwendung. Fügen Sie dann benutzerfreundliche Ladeanimationen wie Spinner hinzu, die von Paketen wie bereitgestellt werden Reagieren Sie Spinner.

Um dieses Paket zu verwenden, installieren Sie es in Ihrem Projekt.

npm install react-loader-spinner --save

Aktualisieren Sie als Nächstes Ihre Loading.js Datei wie folgt:

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

Jetzt zeigt die Lade-Benutzeroberfläche eine Lademeldung an und rendert eine Animation mit rotierenden Linien, um die laufende Verarbeitung beim Abrufen von Todos-Daten anzuzeigen.

Verbessern Sie die Benutzererfahrung durch das Laden von Benutzeroberflächen

Durch die Integration von Lade-Benutzeroberflächen in Ihre Webanwendungen kann die Benutzererfahrung erheblich verbessert werden. Indem Sie Benutzern während asynchroner Vorgänge visuelle Hinweise geben, können Sie ihre Sorgen und Unsicherheiten effektiv minimieren und somit ihr Engagement maximieren.