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

Узнайте, что такое каркасный экран, почему вы можете использовать его в своем приложении и как реализовать его в Next.js.

Что такое каркасный экран?

Скелет экрана — это элемент пользовательского интерфейса, который указывает, что что-то загружается. Обычно это пустое или «пустое» состояние компонента пользовательского интерфейса без каких-либо данных. Например, если вы загружаете список элементов из базы данных, каркасный экран может быть простым списком без данных, а только элементами-заполнителями.

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

Зачем использовать каркасный экран?

instagram viewer

Есть несколько причин, по которым вы можете захотеть использовать экран-скелет в своем приложении Next.js.

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

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

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

Как реализовать скелетный экран в Next.js

Есть несколько способов реализовать каркасные экраны в Next.js. Вы можете использовать встроенные функции для ручного воссоздания простого каркасного экрана. Или вы можете использовать библиотеку, например реакция-загрузка-скелет или Material UI, чтобы сделать эту работу за вас.

Способ 1: Использование встроенных функций

В Next.js вы можете использовать различные хуки React и простые условия для показа каркасных экранов. Вы можете использовать && prop для условной визуализации каркасных экранов.

Импортировать {useState, useEffect} от 'реагировать';
функцияМой Компонент() {
константа [isLoading, setIsLoading] = useState(истинный);


использовать эффект (() => {
 setTimeout(() => setIsLoading(ЛОЖЬ), 1000);
 }, []);


возвращаться (
<див>
 {идет загрузка && (
<див>
 Загрузка...
</div>
 )}
 {!идет загрузка && (
<див>
 Мой компонентный контент.
</div>
 )}
</div>
 );
}
экспортпо умолчанию Мой Компонент;

В приведенном выше коде используется использование состояния хук, чтобы отслеживать, загружаются ли данные (isLoading). Он использует использованиеЭффект ловушка для имитации загрузки данных асинхронно. Наконец, он использует && оператор для условной визуализации каркасного экрана или содержимого компонента.

Этот метод не идеален, так как требует ручной настройки isLoading состояние и имитация загрузки данных. Тем не менее, это простой способ реализовать каркасный экран в Next.js.

Способ 2: Использование библиотеки типа «React-Loading-Skeleton»

Еще один способ реализовать каркасные экраны — использовать библиотеку наподобие реакция-загрузка-скелет. react-loading-skeleton — это компонент React, который можно использовать для создания каркасных экранов. Оно имеет компонент, который вы можете обернуть вокруг любого элемента пользовательского интерфейса.

Чтобы использовать скелет реакции-загрузки, вам нужно установить его, используя нпм.

npm я реагирую на загрузку скелета

После установки вы можете импортировать его в свое приложение Next.js и использовать следующим образом:

Импортировать Реагировать от 'реагировать';
Импортировать Скелет от «реагировать на загрузку скелета»;
Импортировать 'реакция-загрузка-скелет/расстояние/скелет.css'
константа Приложение = () => {
возвращаться (
<див>
<Скелет />
<h3>Второй экран</h3>
<Высота скелета = {40} />
</div>
 );
};
экспортпо умолчанию Приложение;

Приведенный выше код импортирует Скелет компонент из библиотеки react-loading-skeleton. Затем он использует его для создания двух каркасных экранов. Он использует высота prop, чтобы установить высоту экрана скелета. Теперь вы можете использовать условный рендеринг отображать компонент только при наличии данных.

Способ 3: использование пользовательского интерфейса материала

Если вы используете Material UI в своем приложении Next.js, вы можете использовать компонент из @муи/материал библиотека. Компонент из Material UI имеет несколько реквизитов, которые можно использовать для настройки скелетного экрана.

Чтобы использовать компонент из Material UI, вам сначала нужно установить его с помощью npm:

установка нпм @муи/material

После установки вы можете импортировать его в свое приложение Next.js и использовать следующим образом:

Импортировать Реагировать от 'реагировать';
Импортировать Скелет от '@mui/материал/Скелет';
константа Приложение = () => {
возвращаться (
<див>
<Вариант скелета="прямой" ширина={210} высота={118} />
<h3>Второй экран</h3>
<Вариант скелета="текст" />
</div>
 );
};
экспортпо умолчанию Приложение;

Приведенный выше код импортирует Скелет компонент из @материал-уи/лаборатория библиотека. Затем он создает два каркасных экрана. вариант prop устанавливает тип каркасного экрана. ширина и высота props определяют размеры каркасного экрана.

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

Импортировать Реагировать от 'реагировать';
Импортировать Скелет от '@mui/материал/Скелет';
константа Приложение = () => {
возвращаться (
<див>
<Вариант скелета="прямой" ширина={210} высота={118} />
<h3>Второй экран</h3>
<Вариант скелета="текст" анимировать ="волна" />
</div>
 );
};
экспортпо умолчанию Приложение;

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

Улучшите взаимодействие с пользователем с помощью каркасных экранов

Скелетные экраны могут стать отличным способом улучшить взаимодействие с пользователем в вашем приложении Next.js. Они могут увеличить воспринимаемую скорость, уменьшить рывки и улучшить работу, когда данные передаются по медленному или нестабильному соединению.

Какой бы метод вы ни выбрали для добавления каркасных экранов, это отличный способ улучшить взаимодействие с пользователем в вашем приложении Next.js.