Зареждащите се потребителски интерфейси и визуални елементи са важни компоненти в уеб и мобилните приложения; те играят основна роля за подобряване на потребителското изживяване и ангажираност. Без такива подсказки потребителите може да изпаднат в недоумение и несигурност относно това дали приложението функционира правилно, дали са задействали правилните действия или дали действията им се обработват.

Като предоставяте на потребителите различни визуални знаци, които показват текуща обработка, можете ефективно да смекчите всякаква форма на несигурност и разочарование - в крайна сметка ги възпира от преждевременно излизане от приложението.

Влияние на зареждането на потребителски интерфейси върху производителността и потребителското изживяване

Десетте евристики на Jakob Nielsen за проектиране на потребителски интерфейс подчертават важността да се гарантира, че текущото състояние на системата е видимо за крайните потребители. Този принцип подчертава необходимостта от компоненти на потребителския интерфейс, като потребителски интерфейси за зареждане и други потребителски интерфейси за обратна връзка елементи за незабавно предоставяне на потребителите на подходяща обратна връзка относно текущите процеси и в рамките на изискваното времева рамка.

Потребителските интерфейси за зареждане играят основна роля при оформянето на цялостната производителност и потребителското изживяване на приложенията. От гледна точка на производителността, прилагането на ефективни екрани за зареждане може значително да подобри скоростта и отзивчивостта на уеб приложението.

В идеалния случай ефективното използване на потребителски интерфейси за зареждане позволява асинхронно зареждане на съдържание – това предотвратява замразяването на цялата страница, докато конкретни компоненти се зареждат във фонов режим; по същество създавайки по-плавно изживяване при сърфиране.

Освен това, предлагайки ясна визуална индикация за текущите процеси, е по-вероятно потребителите да изчакат търпеливо извличане на съдържание.

Първи стъпки с React Suspense в Next.js 13

Съспенс е компонент на React, който управлява асинхронни операции, изпълнявани във фонов режим, като извличане на данни. Просто казано, този компонент ви позволява да изобразите резервен компонент, докато предвиденият дъщерен компонент се монтира и зареди необходимите данни.

Ето пример за това как работи Suspense. Да приемем, че имате компонент, който извлича данни от API.

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

Съспенсът ще покаже Зареждане компонент до съдържанието на Todos компонент завършва зареждането и е готов за изобразяване. Ето синтаксиса на Suspense за постигане на това:

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

 </Suspense>
 </>
 );}

Next.js 13 Поддържа React Suspense

Next.js 13 добави поддръжка за Suspense чрез своята функция за директория на приложения. по същество, работа с директорията на приложенията ви позволява да включвате и организирате файлове на страници за определен маршрут в рамките на специална папка.

В тази директория с маршрути можете да включите a зареждане.js файл, който Next.js след това ще използва като резервен компонент за показване на потребителския интерфейс за зареждане, преди да изобрази дъщерния компонент с неговите данни.

Сега нека интегрираме React Suspense в Next.js 13, като изградим демонстрационно To-Do приложение.

Можете да намерите кода на този проект в него GitHub хранилище.

Създайте проект Next.js 13

Ще създадете просто приложение, което извлича списък със задачи от API на DummyJSON крайна точка. За да започнете, изпълнете командата по-долу, за да инсталирате Next.js 13.

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

Определете Todos Route

Вътре в src/приложение директория, създайте нова папка и я наименувайте Todos. В тази папка добавете нова page.js файл и включете кода по-долу.

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;

Асинхронната функция, Todos, извлича списък със задачи от DummyJSON API. След това картографира масива от извлечени задачи, за да изобрази списък със задачи на страницата на браузъра.

Освен това кодът включва асинхронен изчакайте функция, която симулира забавяне, създавайки сценарий, който ще позволи на потребителя да види потребителски интерфейс за зареждане за определена продължителност, преди да покаже извлечените задачи.

В по-реалистичен случай на употреба; вместо да симулира забавяне, ситуации като дейности по обработка в рамките на приложения, извличане на данни от бази данни, консумиране на API, или дори бавните времена за отговор на API биха причинили някои кратки забавяния.

Интегрирайте React Suspense в приложението Next.js

Отвори app/layout.js файл и актуализирайте шаблонния код Next.js със следния код.

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 файл в Next.js 13 служи като централен компонент на оформлението, който определя цялостната структура и поведение на оформлението на приложението. В този случай преминаването на деца опора на Съспенс компонент, гарантира, че оформлението става обвивка за цялото съдържание на приложението.

The Съспенс компонентът ще покаже Зареждане компонент като резервен вариант, докато дъщерните компоненти зареждат съдържанието си асинхронно; което показва на потребителя, че съдържанието се извлича или обработва във фонов режим.

Актуализирайте файла за начален маршрут

Отвори app/page.js файл, изтрийте шаблонния код Next.js и добавете кода по-долу.

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;

Създайте файла loading.js

И накрая, продължете и създайте a зареждане.js файл вътре в приложение/Todos указател. Вътре в този файл добавете кода по-долу.

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

Добавяне на модерни спинери към компонента на потребителския интерфейс за зареждане

Зареждащият UI компонент, който сте създали, е много основен; по желание можете да изберете да добавите скелетни екрани. Като алтернатива можете да създавате и стилизирате персонализирани компоненти за зареждане използвайки Tailwind CSS във вашето приложение Next.js. След това добавете удобни за потребителя анимации за зареждане като спинери, предоставени от пакети като React Spiners.

За да използвате този пакет, продължете и го инсталирайте във вашия проект.

npm install react-loader-spinner --save

След това актуализирайте своя зареждане.js файл, както следва:

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

Сега потребителският интерфейс за зареждане ще покаже съобщение за зареждане и ще изобрази анимация на въртящи се линии, за да покаже текуща обработка при извличане на данни от Todos.

Подобрете потребителското изживяване със зареждане на потребителски интерфейси

Включването на потребителски интерфейси за зареждане във вашите уеб приложения може значително да подобри потребителското изживяване. Предоставяйки на потребителите визуални подсказки по време на асинхронни операции, можете ефективно да минимизирате техните притеснения и всякаква несигурност и следователно да увеличите максимално тяхната ангажираност.