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

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

Утицај учитавања корисничких интерфејса на перформансе и корисничко искуство

Десет хеуристика Јакоба Ниелсена за дизајн корисничког интерфејса наглашава важност обезбеђивања да се тренутни статус система види крајњим корисницима. Овај принцип наглашава потребу за компонентама корисничког интерфејса као што су кориснички интерфејси за учитавање и други кориснички интерфејс за повратне информације елементе за брзо пружање одговарајућих повратних информација корисницима о текућим процесима иу оквиру потребних Временски оквир.

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

У идеалном случају, ефикасно коришћење корисничких интерфејса за учитавање омогућава асинхроно учитавање садржаја—ово спречава замрзавање целе странице док се одређене компоненте учитавају у позадини; у суштини, стварајући лакше искуство прегледања.

Штавише, нудећи јасну визуелну индикацију текућих процеса, већа је вероватноћа да ће корисници стрпљиво чекати преузимање садржаја.

Почетак рада са Реацт Суспенсе у Нект.јс 13

Неизвесност је Реацт компонента која управља асинхроним операцијама које се извршавају у позадини, као што је преузимање података. Једноставно речено, ова компонента вам омогућава да прикажете резервну компоненту док се предвиђена подређена компонента не монтира и учита потребне податке.

Ево примера како Суспенсе функционише. Претпоставимо да имате компоненту која преузима податке из АПИ-ја.

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>
 </>
 );}

Нект.јс 13 Подржава Реацт Суспенсе

Нект.јс 13 је додао подршку за Суспенсе кроз функцију директоријума апликација. У суштини, рад са директоријумом апликација омогућава вам да укључите и организујете датотеке страница за одређену руту у оквиру наменске фасцикле.

Унутар овог директоријума рута можете укључити а лоадинг.јс датотеку, коју ће Нект.јс затим користити као резервну компоненту за приказ корисничког интерфејса за учитавање пре приказивања подређене компоненте са њеним подацима.

Сада, хајде да интегришемо Реацт Суспенсе у Нект.јс 13 тако што ћемо направити демо апликацију То-До.

Код овог пројекта можете пронаћи у њему ГитХуб репозиторијум.

Направите Нект.јс 13 пројекат

Направићете једноставну апликацију која преузима листу обавеза из ДуммиЈСОН АПИ крајња тачка. Да бисте започели, покрените наредбу испод да бисте инсталирали Нект.јс 13.

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

Дефинишите Тодос руту

Унутар срц/апп директоријум, креирајте нови фолдер и дајте му име Тодос. Унутар овог фолдера додајте нови паге.јс датотеку и укључите код испод.

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;

Асинхрона функција, Тодос, преузима листу задатака из ДуммиЈСОН АПИ-ја. Затим мапира низ преузетих задатака да би приказао листу задатака на страници претраживача.

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

У реалнијем случају употребе; уместо симулације кашњења, ситуације као што су активности обраде унутар апликација, дохваћање података из база података, конзумирање АПИ-ја, или чак, споро време одговора АПИ-ја би изазвало нека кратка кашњења.

Интегришите Реацт Суспенсе у Нект.јс апликацију

Отвори апп/лаиоут.јс датотеку и ажурирајте шаблон Нект.јс код следећим кодом.

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>
 )
}

Тхе апп/лаиоут.јс датотека у Нект.јс 13 служи као централна компонента распореда која дефинише укупну структуру и понашање изгледа апликације. У овом случају, преношење деца проп то тхе Неизвесност компонента, осигурава да изглед постане омот за читав садржај апликације.

Тхе Неизвесност компонента ће приказати Лоадинг компонента као резервни део док подређене компоненте асинхроно учитавају свој садржај; означавајући кориснику да се садржај преузима или обрађује у позадини.

Ажурирајте датотеку кућне руте

Отвори апп/паге.јс датотеку, избришите шаблон Нект.јс код и додајте код испод.

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;

Креирајте датотеку лоадинг.јс

Коначно, само напред и креирајте а лоадинг.јс фајл унутар апп/Тодос именик. Унутар ове датотеке додајте код испод.

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

Додавање модерних спинера компоненти корисничког интерфејса за учитавање

Компонента корисничког интерфејса за учитавање коју сте креирали је веома основна; опционо можете изабрати да додате скелетне екране. Алтернативно, можете креирати и стилизирати прилагођене компоненте за учитавање користећи Таилвинд ЦСС у вашој Нект.јс апликацији. Затим додајте анимације учитавања прилагођене кориснику као што су спинери које пружају пакети као што су Реацт Спиннерс.

Да бисте користили овај пакет, само напред и инсталирајте га у свој пројекат.

npm install react-loader-spinner --save

Затим ажурирајте свој лоадинг.јс фајл на следећи начин:

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

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

Побољшајте корисничко искуство са учитавањем корисничких интерфејса

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