Ако сте користили веб или мобилну апликацију, вероватно сте видели скелет екрана. Овај УИ уређај пружа глаткије искуство када ажурирање зависи од пријема података, што може потрајати да стигне.

Сазнајте шта је тачно скелет екрана, зашто бисте можда желели да их користите у својој апликацији и како да их примените у Нект.јс.

Шта је скелетон екран?

Костурни екран је елемент корисничког интерфејса који указује да се нешто учитава. Обично је празно или „празно“ стање компоненте корисничког интерфејса, без икаквих података. На пример, ако бисте учитали листу ставки из базе података, скелетски екран би могао бити једноставна листа без података, само елементи оквира за чување места.

Многе веб странице и апликације користе скелетне екране. Неки их користе за стање учитавања, док их други користе као начин да побољшају перципиране перформансе.

Зашто користити скелетон екран?

Постоји неколико разлога зашто бисте можда желели да користите скелет екран у апликацији Нект.јс.

Прво, може побољшати перципирани учинак ваше апликације. Ако корисници виде празан екран док се подаци учитавају, могу претпоставити да је апликација спора или да не ради исправно. Међутим, ако виде костурни екран, знају да се подаци учитавају и да апликација ради како се очекује.

Друго, скелетни екрани могу помоћи у смањењу „напетости“ или исецканости у корисничком интерфејсу. Ако се подаци учитавају асинхроно, кориснички интерфејс се може постепено ажурирати како ваша апликација прима податке. Ово може омогућити лакше корисничко искуство.

Треће, скелетни екрани могу пружити боље корисничко искуство ако се подаци учитавају са споре или непоуздане везе. Ако се подаци преузимају са удаљеног сервера, постоји шанса да ће веза бити спора или прекинута. У овим случајевима може бити од помоћи да се прикаже скелет екрана тако да корисници знају да се подаци учитавају, чак и ако је потребно неко време.

Како имплементирати скелетон екран у Нект.јс

Постоји неколико начина за имплементацију скелетних екрана у Нект.јс. Можете да користите уграђене функције за ручно поновно креирање једноставног скелета екрана. Или можете користити библиотеку као што је реаговати-учитавање-скелет или Материал УИ да уради посао уместо вас.

Метод 1: Коришћење уграђених функција

У Нект.јс можете да користите различите Реацт куке и једноставни услови за приказивање скелета екрана. Можете користити && проп за условно приказивање скелета екрана.

увоз {усеСтате, усеЕффецт} из 'реаговати';
функцијаМиЦомпонент() {
конст [исЛоадинг, сетИсЛоадинг] = усеСтате(истина);


усеЕффецт(() => {
 сетТимеоут(() => сетИсЛоадинг(лажно), 1000);
 }, []);


повратак (
<див>
 {исЛоадинг && (
<див>
 Учитавање...
</div>
 )}
 {!исЛоадинг && (
<див>
 Садржај моје компоненте.
</div>
 )}
</div>
 );
}
извозУобичајено МиЦомпонент;

Горњи код користи усеСтате кука за праћење да ли се подаци учитавају (исЛоадинг). Користи се усеЕффецт кука за симулацију учитавања података асинхроно. Коначно, користи се && оператора да условно прикаже екран скелета или садржај компоненте.

Овај метод није идеалан, јер захтева ручно подешавање исЛоадинг стање и симулација учитавања података. Међутим, то је једноставан начин за имплементацију скелета екрана у Нект.јс.

Метод 2: Коришћење библиотеке попут „Реацт-Лоадинг-Скелетон“

Други начин за имплементацију скелетних екрана је коришћење библиотеке као што је реаговати-учитавање-скелет. реацт-лоадинг-скелетон је Реацт компонента коју можете користити за креирање скелета екрана. Има а компонента коју можете да омотате око било ког елемента корисничког интерфејса.

Да бисте користили реацт-лоадинг-скелетон, морате га инсталирати користећи нпм.

нпм и реацт-лоадинг-скелетон

Када се инсталира, можете да је увезете у своју Нект.јс апликацију и користите је на следећи начин:

увоз Реаговати из 'реаговати';
увоз Скелетон из 'реацт-лоадинг-скелетон';
увоз 'реацт-лоадинг-скелетон/дист/скелетон.цсс'
конст Апликација = () => {
повратак (
<див>
<скелет />
<х3>Други екран</h3>
<Висина скелета={40} />
</div>
 );
};
извозУобичајено Апликација;

Горњи код увози Скелетон компонента из библиотеке реацт-лоадинг-скелета. Затим га користи за креирање два скелета екрана. Користи се висина проп за подешавање висине скелета екрана. Сада можете користите условно приказивање да се компонента прикаже само када су подаци присутни.

Метод 3: Коришћење корисничког интерфејса материјала

Ако користите Материал УИ у апликацији Нект.јс, можете да користите компонента из @муи/материјал библиотека. Тхе компонента из Материал УИ-а има неколико реквизита које можете користити за прилагођавање скелета екрана.

Да бисте користили компоненту из Материал УИ, прво морате да је инсталирате користећи нпм:

нпм инсталл @муи/material

Када се инсталира, можете да је увезете у своју Нект.јс апликацију и користите је на следећи начин:

увоз Реаговати из 'реаговати';
увоз Скелетон из '@муи/материал/Скелетон';
конст Апликација = () => {
повратак (
<див>
<Варијанта костура="рецт" ширина={210} висина={118} />
<х3>Други екран</h3>
<Варијанта костура="текст" />
</div>
 );
};
извозУобичајено Апликација;

Горњи код увози Скелетон компонента из @материал-уи/лаб библиотека. Затим ствара два скелета екрана. Тхе варијанта проп поставља тип скелета екрана. Тхе ширина и висина реквизити дефинишу димензије скелета паравана.

Такође можете додати различите анимације на своје скелетне екране. Материјални кориснички интерфејс има неколико уграђених анимација које можете да користите. На пример, можете користити анимирати проп за додавање бледеће анимације на ваше скелетне екране:

увоз Реаговати из 'реаговати';
увоз Скелетон из '@муи/материал/Скелетон';
конст Апликација = () => {
повратак (
<див>
<Варијанта костура="рецт" ширина={210} висина={118} />
<х3>Други екран</h3>
<Варијанта костура="текст" анимате="талас" />
</div>
 );
};
извозУобичајено Апликација;

Додавањем анимирати потпора за а компоненту, можете да уградите визуелно кретање у свој кориснички интерфејс. Тхе талас вредност додаје анимацију махања скелетном екрану. Сада можете да користите условно рендеровање да бисте приказали садржај после скелета екрана.

Побољшајте корисничко искуство помоћу скелетних екрана

Скелетон екрани могу бити одличан начин да побољшате корисничко искуство ваше Нект.јс апликације. Они могу да повећају перципирану брзину, смање џанк и понуде боље искуство када подаци путују спором или нестабилном везом.

Који год метод да одаберете да додате скелетне екране, они су одличан начин да побољшате корисничко искуство ваше Нект.јс апликације.