Ładowanie interfejsów użytkownika i elementów wizualnych to ważne elementy aplikacji internetowych i mobilnych; odgrywają kluczową rolę w zwiększaniu komfortu i zaangażowania użytkowników. Bez takich wskazówek użytkownicy mogą być zdezorientowani i niepewni, czy aplikacja działa poprawnie, czy uruchomili właściwe działania lub czy ich działania są przetwarzane.

Zapewniając użytkownikom różne wskazówki wizualne wskazujące trwające przetwarzanie, można skutecznie temu zapobiec jakąkolwiek formę niepewności i frustracji, co ostatecznie powstrzymuje ich przed przedwczesnym opuszczeniem aplikacji.

Wpływ ładowania interfejsów użytkownika na wydajność i doświadczenie użytkownika

Dziesięć heurystyk Jakoba Nielsena dotyczących projektowania interfejsu użytkownika podkreśla znaczenie zapewnienia widoczności bieżącego stanu systemu dla użytkowników końcowych. Zasada ta podkreśla potrzebę stosowania komponentów interfejsu użytkownika, takich jak interfejsy ładowania i inne interfejsy użytkownika służące do przesyłania informacji zwrotnych elementy umożliwiające szybkie przekazywanie użytkownikom odpowiednich informacji zwrotnych na temat bieżących procesów i w wymaganym zakresie ramy czasowe.

Ładowanie interfejsów użytkownika odgrywa kluczową rolę w kształtowaniu ogólnej wydajności i komfortu korzystania z aplikacji. Z punktu widzenia wydajności wdrożenie skutecznych ekranów ładowania może znacznie zwiększyć szybkość i responsywność aplikacji internetowej.

W idealnym przypadku efektywne wykorzystanie interfejsów użytkownika do ładowania umożliwia asynchroniczne ładowanie treści — zapobiega to zawieszaniu się całej strony podczas ładowania określonych komponentów w tle; zasadniczo zapewniając płynniejsze przeglądanie.

Co więcej, oferując jasne wizualne wskazanie trwających procesów, użytkownicy chętniej będą cierpliwie czekać na pobranie treści.

Pierwsze kroki z React Suspense w Next.js 13

Niepewność to komponent React, który zarządza operacjami asynchronicznymi działającymi w tle, takimi jak pobieranie danych. Mówiąc najprościej, ten komponent umożliwia renderowanie komponentu rezerwowego do momentu zamontowania zamierzonego komponentu podrzędnego i załadowania wymaganych danych.

Oto przykład działania Suspensu. Załóżmy, że masz komponent pobierający dane z interfejsu API.

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

Suspens wyświetli Ładowanie komponent aż do zawartości Wszystko komponent kończy ładowanie i jest gotowy do renderowania. Oto składnia suspensu, aby to osiągnąć:

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

 </Suspense>
 </>
 );}

Next.js 13 obsługuje napięcie reakcji

W Next.js 13 dodano obsługę Suspense poprzez funkcję katalogu aplikacji. Głównie, praca z katalogiem aplikacji umożliwia dołączanie i organizowanie plików stron dla określonej trasy w dedykowanym folderze.

W tym katalogu tras możesz dołączyć plik ładowanie.js plik, który Next.js użyje następnie jako komponent zastępczy do wyświetlenia ładującego interfejsu użytkownika przed wyrenderowaniem komponentu podrzędnego z jego danymi.

Teraz zintegrujmy React Suspense z Next.js 13, tworząc wersję demonstracyjną aplikacji To-Do.

Kod tego projektu znajdziesz w jego pliku GitHub magazyn.

Utwórz projekt Next.js 13

Zbudujesz prostą aplikację, która pobiera listę zadań do wykonania z pliku Sztuczne API JSON punkt końcowy. Aby rozpocząć, uruchom poniższe polecenie, aby zainstalować Next.js 13.

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

Zdefiniuj trasę Todos

W środku źródło/aplikacja katalog, utwórz nowy folder i nadaj mu nazwę Wszystko. Wewnątrz tego folderu dodaj nowy strona.js plik i dołącz poniższy kod.

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;

Funkcja asynchroniczna, Wszystko, pobiera listę zadań do wykonania z interfejsu API DummyJSON. Następnie mapuje tablicę pobranych zadań do wykonania, aby wyświetlić listę zadań do wykonania na stronie przeglądarki.

Ponadto kod zawiera asynchronous Czekać funkcja symulująca opóźnienie, tworząca scenariusz, który pozwoli użytkownikowi zobaczyć ładujący się interfejs użytkownika przez określony czas przed wyświetleniem pobranych zadań.

W bardziej realistycznym przypadku użycia; zamiast symulować opóźnienie, sytuacje takie jak przetwarzanie danych w aplikacjach, pobieranie danych z baz danych, zużywają APIlub nawet powolne czasy odpowiedzi interfejsu API spowodowałyby krótkie opóźnienia.

Zintegruj React Suspense z aplikacją Next.js

Otworzyć app/layout.js plik i zaktualizuj standardowy kod Next.js następującym kodem.

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

The app/layout.js Plik w Next.js 13 służy jako centralny komponent układu, który definiuje ogólną strukturę i zachowanie układu aplikacji. W tym przypadku przejście dzieci podeprzyj do Niepewność komponent, zapewnia, że ​​układ stanie się opakowaniem dla całej zawartości aplikacji.

The Niepewność komponent wyświetli Ładowanie komponent jako rezerwowy, podczas gdy komponenty podrzędne ładują swoją zawartość asynchronicznie; wskazując użytkownikowi, że treść jest pobierana lub przetwarzana w tle.

Zaktualizuj plik trasy domowej

Otworzyć app/page.js plik, usuń szablonowy kod Next.js i dodaj poniższy kod.

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;

Utwórz plik loading.js

Na koniec idź dalej i utwórz plik ładowanie.js plik wewnątrz aplikacja/zadania informator. Wewnątrz tego pliku dodaj poniższy kod.

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

Dodanie nowoczesnych spinnerów do komponentu ładowania interfejsu użytkownika

Utworzony komponent ładowania interfejsu użytkownika jest bardzo prosty; możesz opcjonalnie dodać ekrany szkieletowe. Alternatywnie możesz tworzyć i stylizować niestandardowe komponenty ładowania używając CSS Tailwind w aplikacji Next.js. Następnie dodaj przyjazne dla użytkownika animacje ładowania, takie jak spinnery dostarczane przez pakiety takie jak Reaguj Spinnery.

Aby skorzystać z tego pakietu, zainstaluj go w swoim projekcie.

npm install react-loader-spinner --save

Następnie zaktualizuj swój ładowanie.js plik w następujący sposób:

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

Teraz ładujący interfejs użytkownika wyświetli komunikat ładowania i wyrenderuje animację obrotowej linii, aby wskazać trwające przetwarzanie podczas pobierania danych Todos.

Popraw doświadczenie użytkownika dzięki ładowaniu interfejsów użytkownika

Włączenie ładowanych interfejsów użytkownika do aplikacji internetowych może znacząco poprawić komfort użytkownika. Dostarczając użytkownikom wskazówek wizualnych podczas operacji asynchronicznych, możesz skutecznie zminimalizować ich zmartwienia i wszelkie niepewności, a w konsekwencji zmaksymalizować ich zaangażowanie.