Načítání uživatelských rozhraní a vizuálních prvků jsou důležité součásti webových a mobilních aplikací; hrají klíčovou roli při zlepšování uživatelské zkušenosti a zapojení. Bez takových vodítek by uživatelé mohli být zmatení a nejisté, zda aplikace funguje správně, zda spustili správné akce nebo zda jsou jejich akce zpracovávány.

Tím, že uživatelům poskytnete různé vizuální podněty, které naznačují probíhající zpracování, můžete účinně zmírnit následky jakákoli forma nejistoty a frustrace – což je v konečném důsledku odrazuje od předčasného ukončení aplikace.

Vliv načítání uživatelského rozhraní na výkon a uživatelský dojem

Deset heuristiky Jakoba Nielsena pro návrh uživatelského rozhraní zdůrazňuje důležitost zajištění toho, aby byl aktuální stav systému viditelný pro koncové uživatele. Tento princip zdůrazňuje potřebu komponent uživatelského rozhraní, jako jsou načítání UI a další UI pro zpětnou vazbu prvky, které uživatelům rychle poskytují vhodnou zpětnou vazbu o probíhajících procesech a v rámci požadovaného časové okno.

Načítání uživatelského rozhraní hraje klíčovou roli při utváření celkového výkonu a uživatelské zkušenosti aplikací. Z hlediska výkonu může implementace efektivních obrazovek načítání výrazně zvýšit rychlost a odezvu webové aplikace.

V ideálním případě umožňuje efektivní využití načítání UI asynchronní načítání obsahu – to zabraňuje zamrznutí celé stránky, zatímco se konkrétní komponenty načítají na pozadí; v podstatě vytváří plynulejší zážitek z prohlížení.

Navíc díky jasné vizuální indikaci probíhajících procesů uživatelé s větší pravděpodobností budou trpělivě čekat na načtení obsahu.

Začínáme s React Suspense v Next.js 13

Napětí je komponenta React, která spravuje asynchronní operace běžící na pozadí, jako je načítání dat. Jednoduše řečeno, tato komponenta vám umožňuje vykreslit záložní komponentu, dokud se zamýšlená podřízená komponenta nepřipojí a nenačte požadovaná data.

Zde je příklad toho, jak Suspense funguje. Předpokládejme, že máte komponentu, která načítá data z API.

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

Napětí zobrazí načítání složky až do obsahu Todos komponenta dokončí načítání a je připravena k vykreslení. Zde je syntaxe Suspense, jak toho dosáhnout:

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

 </Suspense>
 </>
 );}

Next.js 13 Podporuje React Suspense

Next.js 13 přidal podporu pro Suspense prostřednictvím funkce adresáře aplikací. V podstatě, práce s adresářem aplikace umožňuje zahrnout a uspořádat stránkovací soubory pro konkrétní trasu do vyhrazené složky.

Do tohoto adresáře trasy můžete zahrnout a načítání.js soubor, který Next.js poté použije jako záložní komponentu k zobrazení uživatelského rozhraní načítání před vykreslením podřízené komponenty s jejími daty.

Nyní pojďme integrovat React Suspense do Next.js 13 vytvořením ukázkové aplikace To-Do.

Kód tohoto projektu najdete v něm GitHub úložiště.

Vytvořte projekt Next.js 13

Vytvoříte jednoduchou aplikaci, která načte seznam úkolů z DummyJSON API koncový bod. Chcete-li začít, spusťte níže uvedený příkaz a nainstalujte Next.js 13.

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

Definujte trasu Todos

Uvnitř src/app adresář, vytvořte novou složku a pojmenujte ji Todos. Do této složky přidejte nový page.js soubor a zahrňte níže uvedený kód.

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;

asynchronní funkce, Todos, načte seznam úkolů z rozhraní DummyJSON API. Poté mapuje pole načtených úkolů a vykresluje seznam úkolů na stránce prohlížeče.

Navíc kód obsahuje asynchronní Počkejte funkce, která simuluje zpoždění a vytváří scénář, který uživateli umožní vidět načítání uživatelského rozhraní po určitou dobu před zobrazením načtených úkolů.

V realističtějším případě použití; místo simulace zpoždění se situace, jako jsou činnosti zpracování v rámci aplikací, načítání dat z databází, spotřebovává APInebo dokonce pomalé doby odezvy API by způsobily krátké zpoždění.

Integrujte React Suspense do aplikace Next.js

Otevři app/layout.js soubor a aktualizujte standardní kód Next.js následujícím kódem.

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 soubor v Next.js 13 slouží jako centrální komponenta rozvržení, která definuje celkovou strukturu a chování rozvržení aplikace. V tomto případě absolvování děti podpěra k Napětí komponenta zajišťuje, že se rozvržení stane obalem pro celý obsah aplikace.

The Napětí komponenta zobrazí načítání komponenta jako záložní, zatímco podřízené komponenty načítají svůj obsah asynchronně; indikující uživateli, že obsah je načítán nebo zpracováván na pozadí.

Aktualizujte soubor domovské trasy

Otevři app/page.js soubor, odstraňte standardní kód Next.js a přidejte kód níže.

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;

Vytvořte soubor loading.js

Nakonec pokračujte a vytvořte a načítání.js soubor uvnitř aplikace/Úkoly adresář. Do tohoto souboru přidejte níže uvedený kód.

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

Přidání moderních spinnerů do komponenty uživatelského rozhraní načítání

Komponenta načítání uživatelského rozhraní, kterou jste vytvořili, je velmi základní; volitelně se můžete rozhodnout přidat skeletové obrazovky. Případně můžete vytvořit a upravit vlastní nakládací komponenty pomocí Tailwind CSS v aplikaci Next.js. Poté přidejte uživatelsky přívětivé animace načítání, jako jsou spinnery poskytované balíčky, jako je např Reagovat Spinnery.

Chcete-li tento balíček použít, pokračujte a nainstalujte jej do svého projektu.

npm install react-loader-spinner --save

Dále aktualizujte svůj načítání.js soubor takto:

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

Uživatelské rozhraní pro načítání nyní zobrazí zprávu o načítání a vykreslí animaci rotujících řádků, která indikuje probíhající zpracování při načítání dat Todos.

Vylepšete uživatelský dojem pomocí načítání uživatelského rozhraní

Začlenění načítání uživatelských rozhraní do vašich webových aplikací může výrazně zlepšit uživatelský dojem. Poskytnutím vizuálních podnětů uživatelům během asynchronních operací můžete efektivně minimalizovat jejich obavy a jakékoli nejistoty a následně maximalizovat jejich zapojení.