Wenn Sie eine Web- oder mobile App verwendet haben, haben Sie wahrscheinlich einen Skelettbildschirm gesehen. Dieses UI-Gerät bietet eine reibungslosere Erfahrung, wenn ein Update vom Empfang von Daten abhängt, was eine Weile dauern kann, bis es ankommt.

Erfahren Sie genau, was ein Skelettbildschirm ist, warum Sie ihn in Ihrer App verwenden möchten und wie Sie ihn in Next.js implementieren.

Was ist ein Skeleton-Bildschirm?

Ein Skelettbildschirm ist ein UI-Element, das anzeigt, dass etwas geladen wird. Es ist normalerweise ein leerer oder "leerer" Zustand einer UI-Komponente ohne Daten. Wenn Sie beispielsweise eine Liste mit Elementen aus einer Datenbank laden, könnte der Skelettbildschirm eine einfache Liste ohne Daten sein, nur Platzhalter-Feldelemente.

Viele Websites und Apps verwenden Skelettbildschirme. Einige verwenden sie für einen Ladezustand, während andere sie verwenden, um die wahrgenommene Leistung zu verbessern.

Warum einen Skeleton-Bildschirm verwenden?

Es gibt einige Gründe, warum Sie in Ihrer Next.js-App möglicherweise einen Skeleton-Bildschirm verwenden möchten.

instagram viewer

Erstens kann es die wahrgenommene Leistung Ihrer App verbessern. Wenn Benutzer während des Ladens von Daten einen leeren Bildschirm sehen, können sie davon ausgehen, dass die App langsam ist oder nicht richtig funktioniert. Wenn sie jedoch einen Skelettbildschirm sehen, wissen sie, dass Daten geladen werden und die App wie erwartet funktioniert.

Zweitens können Skeleton-Bildschirme dazu beitragen, "Ruck" oder Abgehacktheit in Ihrer Benutzeroberfläche zu reduzieren. Wenn Daten asynchron geladen werden, kann die Benutzeroberfläche inkrementell aktualisiert werden, wenn Ihre App Daten empfängt. Dies kann für eine reibungslosere Benutzererfahrung sorgen.

Drittens können Skelettbildschirme eine bessere Benutzererfahrung bieten, wenn Daten von einer langsamen oder unzuverlässigen Verbindung geladen werden. Wenn Daten von einem Remote-Server abgerufen werden, besteht die Möglichkeit, dass die Verbindung langsam ist oder unterbrochen wird. In diesen Fällen kann es hilfreich sein, einen Skelettbildschirm anzuzeigen, damit Benutzer wissen, dass Daten geladen werden, auch wenn es eine Weile dauert.

So implementieren Sie einen Skeleton-Bildschirm in Next.js

Es gibt einige Möglichkeiten, Skelettbildschirme in Next.js zu implementieren. Sie können integrierte Funktionen verwenden, um einen einfachen Skelettbildschirm manuell neu zu erstellen. Oder Sie können eine Bibliothek wie verwenden React-Loading-Skelett oder Material UI, um die Arbeit für Sie zu erledigen.

Methode 1: Verwenden der integrierten Funktionen

In Next.js können Sie verwenden verschiedene React-Hooks und einfache Bedingungen, um Skelettbildschirme anzuzeigen. Du kannst den... benutzen && prop zum bedingten Rendern von Skeleton-Bildschirmen.

importieren {useState, useEffect} aus 'reagieren';
FunktionMeineKomponente() {
konst [isLoading, setIsLoading] = useState(WAHR);


useEffect(() => {
 setTimeout(() => setIsLoading(FALSCH), 1000);
 }, []);


zurückkehren (
<div>
 {ladet && (
<div>
 Wird geladen...
</div>
 )}
 {!ladet && (
<div>
 Mein Komponenteninhalt.
</div>
 )}
</div>
 );
}
ExportStandard MeineKomponente;

Der obige Code verwendet die useState Haken, um zu verfolgen, ob Daten geladen werden (ladet). Es verwendet die useEffect Hook, um das Laden von Daten asynchron zu simulieren. Schließlich verwendet es die && -Operator zum bedingten Rendern des Skeleton-Bildschirms oder des Komponenteninhalts.

Diese Methode ist nicht ideal, da sie eine manuelle Einstellung erfordert ladet Zustand und Simulieren des Ladens von Daten. Es ist jedoch eine einfache Möglichkeit, einen Skelettbildschirm in Next.js zu implementieren.

Methode 2: Verwenden einer Bibliothek wie „React-Loading-Skeleton“

Eine andere Möglichkeit, Skelettbildschirme zu implementieren, ist die Verwendung einer Bibliothek wie React-Loading-Skelett. React-Loading-Skeleton ist eine React-Komponente, mit der Sie Skeleton-Bildschirme erstellen können. Es hat ein Komponente, die Sie um jedes UI-Element wickeln können.

Um das React-Loading-Skeleton zu verwenden, müssen Sie es mit installieren npm.

npm ich reagiere-Lade-Skelett

Sobald es installiert ist, können Sie es in Ihre Next.js-App importieren und wie folgt verwenden:

importieren Reagieren aus 'reagieren';
importieren Skelett aus 'Reaktions-Lade-Skelett';
importieren 'React-Loading-Skeleton/dist/skeleton.css'
konst Anwendung = () => {
zurückkehren (
<div>
<Skelett />
<h3>Zweiter Bildschirm</h3>
<Skeletthöhe = {40} />
</div>
 );
};
ExportStandard Anwendung;

Der obige Code importiert die Skelett Komponente aus der React-Loading-Skeleton-Bibliothek. Es verwendet es dann, um zwei Skelettbildschirme zu erstellen. Es verwendet die Höhe prop, um die Höhe des Skeleton-Bildschirms einzustellen. Jetzt kannst du Verwenden Sie bedingtes Rendering um die Komponente nur zu rendern, wenn die Daten vorhanden sind.

Methode 3: Material-UI verwenden

Wenn Sie Material UI in Ihrer Next.js-App verwenden, können Sie die verwenden Komponente aus der @mui/material Bibliothek. Der Komponente von Material UI hat ein paar Requisiten, die Sie verwenden können, um den Skelettbildschirm anzupassen.

Um die zu verwenden Komponente von Material UI, müssen Sie sie zuerst mit npm installieren:

npm installieren @Mui/material

Sobald es installiert ist, können Sie es in Ihre Next.js-App importieren und wie folgt verwenden:

importieren Reagieren aus 'reagieren';
importieren Skelett aus '@mui/material/Skelett';
konst Anwendung = () => {
zurückkehren (
<div>
<Skelettvariante="rechtwinkl" Breite = {210} Höhe = {118} />
<h3>Zweiter Bildschirm</h3>
<Skelettvariante="Text" />
</div>
 );
};
ExportStandard Anwendung;

Der obige Code importiert die Skelett Komponente aus der @material-ui/lab Bibliothek. Es erstellt dann zwei Skelettbildschirme. Der Variante prop legt den Typ des Skeleton-Bildschirms fest. Der Breite Und Höhe Requisiten definieren die Abmessungen des Skeleton-Bildschirms.

Sie können Ihren Skelettbildschirmen auch verschiedene Animationen hinzufügen. Die Material-Benutzeroberfläche verfügt über einige integrierte Animationen, die Sie verwenden können. Sie können zum Beispiel die verwenden animieren Requisite, um Ihren Skelettbildschirmen eine verblassende Animation hinzuzufügen:

importieren Reagieren aus 'reagieren';
importieren Skelett aus '@mui/material/Skelett';
konst Anwendung = () => {
zurückkehren (
<div>
<Skelettvariante="rechtwinkl" Breite = {210} Höhe = {118} />
<h3>Zweiter Bildschirm</h3>
<Skelettvariante="Text" animieren="Welle" />
</div>
 );
};
ExportStandard Anwendung;

Durch Hinzufügen der animieren Stütze zu a Komponente können Sie visuelle Bewegung in Ihre Benutzeroberfläche integrieren. Der Welle value fügt dem Skeleton-Bildschirm eine winkende Animation hinzu. Sie können jetzt bedingtes Rendering verwenden, um den Inhalt nach dem Skeleton-Bildschirm anzuzeigen.

Verbessern Sie die Benutzererfahrung mit Skeleton-Bildschirmen

Skeleton-Bildschirme können eine großartige Möglichkeit sein, die Benutzererfahrung Ihrer Next.js-App zu verbessern. Sie können die wahrgenommene Geschwindigkeit erhöhen, Störungen reduzieren und ein besseres Erlebnis bieten, wenn Daten über eine langsame oder instabile Verbindung übertragen werden.

Unabhängig davon, welche Methode Sie zum Hinzufügen von Skelettbildschirmen wählen, sie sind eine großartige Möglichkeit, die Benutzererfahrung Ihrer Next.js-App zu verbessern.