Загрузка пользовательского интерфейса и визуальных элементов являются важными компонентами веб- и мобильных приложений; они играют ключевую роль в улучшении пользовательского опыта и вовлеченности. Без таких сигналов пользователи могут оказаться озадаченными и неуверенными в том, правильно ли работает приложение, инициировали ли они правильные действия или обрабатываются ли их действия.

Предоставляя пользователям различные визуальные подсказки, указывающие на продолжающуюся обработку, вы можете эффективно снизить любая форма неуверенности и разочарования, что в конечном итоге удерживает их от преждевременного выхода из приложения.

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

Десять эвристик Якоба Нильсена для дизайна пользовательского интерфейса подчеркивают важность обеспечения видимости текущего состояния системы конечным пользователям. Этот принцип подчеркивает необходимость в компонентах пользовательского интерфейса, таких как пользовательский интерфейс загрузки и другой пользовательский интерфейс обратной связи. элементы для оперативного предоставления пользователям соответствующей обратной связи о текущих процессах и в необходимых пределах. временные рамки.

Загрузка пользовательского интерфейса играет ключевую роль в формировании общей производительности и пользовательского опыта приложений. С точки зрения производительности реализация эффективных загрузочных экранов может значительно повысить скорость и скорость реагирования веб-приложения.

В идеале эффективное использование пользовательских интерфейсов загрузки позволяет осуществлять асинхронную загрузку контента — это предотвращает зависание всей страницы во время загрузки определенных компонентов в фоновом режиме; по сути, создание более плавного просмотра.

Более того, предлагая четкую визуальную индикацию текущих процессов, пользователи с большей вероятностью будут терпеливо ожидать получения контента.

Начало работы с React Suspense в Next.js 13

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

Вот пример того, как работает приостановка. Предположим, у вас есть компонент, который извлекает данные из API.

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

Приостановка отобразит Загрузка компонент до тех пор, пока содержимое Тодос компонент завершает загрузку и готов к рендерингу. Вот синтаксис приостановки для достижения этой цели:

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

 </Suspense>
 </>
 );}

Next.js 13 поддерживает React Suspense

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

В этот каталог маршрутов вы можете включить загрузка.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

Внутри источник/приложение каталог, создайте новую папку и назовите ее Тодос. Внутри этой папки добавьте новый страница.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;

Асинхронная функция, Тодос, извлекает список задач из API DummyJSON. Затем он сопоставляет массив выбранных задач для отображения списка задач на странице браузера.

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

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

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

Открой приложение/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>
 )
}

приложение/layout.js в Next.js 13 служит центральным компонентом макета, который определяет общую структуру и поведение макета приложения. В этом случае прохождение дети опора на Саспенс компонент, гарантирует, что макет станет оболочкой для всего содержимого приложения.

Саспенс компонент отобразит Загрузка компонент в качестве резервного варианта, пока дочерние компоненты загружают свое содержимое асинхронно; указывая пользователю, что контент извлекается или обрабатывается в фоновом режиме.

Обновите файл домашнего маршрута.

Открой приложение/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.

Наконец, идите вперед и создайте загрузка.js файл внутри приложение/Todos каталог. Внутри этого файла добавьте приведенный ниже код.

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

Добавление современных счетчиков в загрузочный компонент пользовательского интерфейса

Созданный вами загрузочный компонент пользовательского интерфейса очень прост; при желании вы можете добавить скелетные экраны. Кроме того, вы можете создавать и стилизовать пользовательские компоненты загрузки. использование Tailwind CSS в вашем приложении Next.js. Затем добавьте удобную для пользователя анимацию загрузки, например, счетчики, предоставляемые такими пакетами, как Реагировать на спиннеры.

Чтобы использовать этот пакет, установите его в свой проект.

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.

Улучшите взаимодействие с пользователем при загрузке пользовательских интерфейсов

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