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

Разберете какво точно представлява skeleton screen, защо може да искате да ги използвате в приложението си и как да ги внедрите в Next.js.

Какво е скелетен екран?

Скелетният екран е елемент на потребителския интерфейс, който показва, че нещо се зарежда. Обикновено това е празно или „празно“ състояние на UI компонент, без никакви данни. Например, ако трябва да заредите списък с елементи от база данни, скелетният екран може да бъде обикновен списък без данни, само елементи на полето за контейнер.

Много уебсайтове и приложения използват скелетни екрани. Някои ги използват за състояние на зареждане, докато други ги използват като начин за подобряване на възприеманата производителност.

Защо да използвате скелетен екран?

Има няколко причини, поради които може да искате да използвате скелетен екран във вашето приложение Next.js.

instagram viewer

Първо, може да подобри възприеманата производителност на вашето приложение. Ако потребителите виждат празен екран, докато данните се зареждат, те може да предполагат, че приложението е бавно или не работи правилно. Ако обаче видят скелетен екран, знаят, че данните се зареждат и приложението работи според очакванията.

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

Трето, скелетните екрани могат да осигурят по-добро потребителско изживяване, ако данните се зареждат от бавна или ненадеждна връзка. Ако данните се извличат от отдалечен сървър, има вероятност връзката да е бавна или прекъсната. В тези случаи може да е полезно да се покаже скелетен екран, така че потребителите да знаят, че данните се зареждат, дори ако това отнема известно време.

Как да внедрим скелетен екран в Next.js

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

Метод 1: Използване на вградените функции

В Next.js можете да използвате различни куки за React и прости условия за показване на скелетни екрани. Можете да използвате && prop за условно изобразяване на скелетни екрани.

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


useEffect(() => {
 setTimeout(() => setIsLoading(невярно), 1000);
 }, []);


връщане (
<див>
 {isLoading && (
<див>
 Зареждане...
</div>
 )}
 {!е Зареждане && (
<див>
 Моето компонентно съдържание.
</div>
 )}
</div>
 );
}
износпо подразбиране MyComponent;

Горният код използва useState кука за проследяване дали данните се зареждат (се зарежда). Той използва useEffect кука за симулиране на асинхронно зареждане на данни. И накрая, той използва && оператор за условно изобразяване на скелетния екран или съдържанието на компонента.

Този метод не е идеален, защото изисква ръчна настройка на се зарежда състояние и симулиране на зареждане на данни. Това обаче е лесен начин за внедряване на скелетен екран в Next.js.

Метод 2: Използване на библиотека като „React-Loading-Skeleton“

Друг начин за внедряване на скелетни екрани е използването на библиотека като реагират-зареждащ-скелет. react-loading-skeleton е React компонент, който можете да използвате за създаване на скелетни екрани. Има компонент, който можете да обвиете около всеки UI елемент.

За да използвате react-loading-skeleton, трябва да го инсталирате с помощта на npm.

npm реагирам-зареждане-скелет

След като бъде инсталиран, можете да го импортирате във вашето приложение Next.js и да го използвате по следния начин:

импортиране Реагирайте от 'реагира';
импортиране Скелет от 'react-loading-skeleton';
импортиране 'реакция-зареждане-skeleton/dist/skeleton.css'
конст Приложение = () => {
връщане (
<див>
<скелет />
<h3>Втори екран</h3>
<Височина на скелета={40} />
</div>
 );
};
износпо подразбиране Приложение;

Горният код импортира Скелет компонент от библиотеката react-loading-skeleton. След това го използва, за да създаде два скелетни екрана. Той използва височина prop, за да зададете височината на скелетния екран. Сега ти можеш използвайте условно изобразяване за изобразяване на компонента само когато данните са налице.

Метод 3: Използване на потребителския интерфейс на материала

Ако използвате Material UI във вашето приложение Next.js, можете да използвате компонент от @mui/материал библиотека. The компонент от Material UI има няколко подпори, които можете да използвате, за да персонализирате скелетния екран.

За да използвате компонент от Material UI, първо трябва да го инсталирате с помощта на npm:

npm инсталирайте @mui/material

След като бъде инсталиран, можете да го импортирате във вашето приложение Next.js и да го използвате по следния начин:

импортиране Реагирайте от 'реагира';
импортиране Скелет от '@mui/material/Skeleton';
конст Приложение = () => {
връщане (
<див>
<Скелетен вариант="прав" ширина={210} височина={118} />
<h3>Втори екран</h3>
<Скелетен вариант="текст" />
</div>
 );
};
износпо подразбиране Приложение;

Горният код импортира Скелет компонент от @material-ui/lab библиотека. След това създава два скелетни екрана. The вариант prop задава типа на скелетния екран. The ширина и височина props определят размерите на скелетния екран.

Можете също така да добавяте различни анимации към вашите скелет екрани. Material UI има няколко вградени анимации, които можете да използвате. Например, можете да използвате оживявам реквизит за добавяне на избледняваща анимация към вашите скелетни екрани:

импортиране Реагирайте от 'реагира';
импортиране Скелет от '@mui/material/Skeleton';
конст Приложение = () => {
връщане (
<див>
<Скелетен вариант="прав" ширина={210} височина={118} />
<h3>Втори екран</h3>
<Скелетен вариант="текст" анимация="вълна" />
</div>
 );
};
износпо подразбиране Приложение;

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

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

Скелетните екрани могат да бъдат чудесен начин да подобрите потребителското изживяване на вашето приложение Next.js. Те могат да увеличат възприеманата скорост, да намалят сблъсъка и да предложат по-добро изживяване, когато данните пътуват през бавна или нестабилна връзка.

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