UI ir vaizdinių elementų įkėlimas yra svarbūs žiniatinklio ir mobiliųjų programų komponentai; jie atlieka pagrindinį vaidmenį gerinant vartotojų patirtį ir įtraukimą. Be tokių užuominų vartotojai gali susimąstyti ir abejoti, ar programa veikia tinkamai, ar suaktyvino tinkamus veiksmus, ar jų veiksmai yra apdorojami.

Suteikdami vartotojams įvairius vaizdinius signalus, rodančius vykstantį apdorojimą, galite veiksmingai sumažinti bet kokios formos netikrumas ir nusivylimas – galiausiai atgrasantys juos nuo anksčiau laiko išeiti iš programos.

NS įkėlimo įtaka našumui ir naudotojų patirčiai

Dešimt Jakobo Nielseno vartotojo sąsajos dizaino euristikos pabrėžė, kaip svarbu užtikrinti, kad esama sistemos būsena būtų matoma galutiniams vartotojams. Šis principas pabrėžia vartotojo sąsajos komponentų, pvz., įkėlimo vartotojo sąsajų ir kitų grįžtamojo ryšio vartotojo sąsajų, poreikį elementai, kad naudotojams būtų galima greitai pateikti atitinkamą grįžtamąjį ryšį apie vykstančius procesus ir neviršijant reikiamų reikalavimų laiko tarpas.

Įkeliamos vartotojo sąsajos atlieka pagrindinį vaidmenį formuojant bendrą programų našumą ir vartotojo patirtį. Našumo požiūriu efektyvių įkėlimo ekranų įdiegimas gali žymiai padidinti žiniatinklio programos greitį ir reagavimą.

Idealiu atveju efektyvus įkėlimo vartotojo sąsajos naudojimas leidžia įkelti turinį asinchroniškai – tai neleidžia visam puslapiui užšalti, kai konkretūs komponentai įkeliami fone; iš esmės sukuria sklandesnę naršymo patirtį.

Be to, pasiūlydami aiškų vaizdinį vykstančių procesų nurodymą, vartotojai labiau linkę kantriai laukti turinio gavimo.

Darbo su „React Suspense“ pradžia „Next.js“ 13

Įtampa yra „React“ komponentas, valdantis asinchronines operacijas, vykdomas fone, pvz., duomenų gavimą. Paprasčiau tariant, šis komponentas leidžia pateikti atsarginį komponentą, kol numatytas antrinis komponentas bus prijungtas ir įkels reikiamus duomenis.

Štai pavyzdys, kaip veikia „Suspense“. Tarkime, kad turite komponentą, kuris gauna duomenis iš API.

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

Suspense parodys Įkeliama komponentas iki turinio Todos komponentas baigiamas įkelti ir yra paruoštas atvaizdavimui. Štai „Suspense“ sintaksė, skirta tai pasiekti:

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

 </Suspense>
 </>
 );}

Next.js 13 palaiko „React Suspense“.

„Next.js 13“ pridėjo „Suspense“ palaikymą per savo programų katalogo funkciją. Iš esmės darbas su programų katalogu leidžia įtraukti ir tvarkyti tam tikro maršruto puslapių failus tam skirtame aplanke.

Šiame maršruto kataloge galite įtraukti a loading.js failą, kurį Next.js tada naudos kaip atsarginį komponentą, kad būtų rodoma įkeliama vartotojo sąsaja prieš pateikiant antrinį komponentą su jo duomenimis.

Dabar integruokime „React Suspense“ į „Next.js 13“, sukurdami demonstracinę „To-Do“ programą.

Šio projekto kodą galite rasti jame GitHub saugykla.

Sukurkite Next.js 13 projektą

Sukursite paprastą programą, kuri paims darbų sąrašą iš DummyJSON API galutinis taškas. Norėdami pradėti, paleiskite toliau pateiktą komandą, kad įdiegtumėte Next.js 13.

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

Apibrėžkite Todos maršrutą

Viduje src/app kataloge, sukurkite naują aplanką ir pavadinkite jį Todos. Šiame aplanke pridėkite naują page.js failą ir įtraukite toliau esantį kodą.

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;

asinchroninė funkcija, Todos, paima darbų sąrašą iš DummyJSON API. Tada jis susieja gautų užduočių masyvą, kad naršyklės puslapyje būtų pateiktas užduočių sąrašas.

Be to, kodas apima asinchroninį laukti funkcija, kuri imituoja delsą ir sukuria scenarijų, kuris leis vartotojui tam tikrą laiką matyti įkėlimo vartotojo sąsają prieš rodant gautus darbus.

Realesniu naudojimo atveju; užuot imitavę delsą, tokios situacijos kaip apdorojimas programose, duomenų gavimas iš duomenų bazių, naudojant API, arba net lėtas API atsako laikas sukeltų trumpą vėlavimą.

Integruokite „React Suspense“ į „Next.js“ programą

Atidaryk app/layout.js failą ir atnaujinkite pagrindinį Next.js kodą tokiu kodu.

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

The app/layout.js failas Next.js 13 yra pagrindinis išdėstymo komponentas, apibrėžiantis bendrą programos išdėstymo struktūrą ir elgseną. Šiuo atveju, praeinant vaikai atrama prie Įtampa komponentas, užtikrina, kad išdėstymas taptų viso programos turinio įvyniojimu.

The Įtampa komponentas parodys Įkeliama komponentas kaip atsarginis elementas, kai antriniai komponentai įkelia turinį asinchroniškai; nurodant vartotojui, kad turinys gaunamas arba apdorojamas fone.

Atnaujinkite namų maršruto failą

Atidaryk app/page.js failą, ištrinkite Next.js kodą ir pridėkite toliau esantį kodą.

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;

Sukurkite failą loading.js

Galiausiai eikite į priekį ir sukurkite a loading.js failas viduje app/Todos katalogas. Šiame faile pridėkite toliau esantį kodą.

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

Šiuolaikinių suktukų pridėjimas prie įkeliamo vartotojo sąsajos komponento

Jūsų sukurtas įkėlimo UI komponentas yra labai paprastas; pasirinktinai galite pasirinkti pridėti skeleto ekranus. Arba galite kurti ir stilizuoti pasirinktinius įkėlimo komponentus naudodami Tailwind CSS savo Next.js programoje. Tada pridėkite patogias įkėlimo animacijas, pvz., suktukus, kuriuos teikia tokie paketai kaip Reaguoti suktukai.

Norėdami naudoti šį paketą, eikite į priekį ir įdiekite jį savo projekte.

npm install react-loader-spinner --save

Tada atnaujinkite savo loading.js failą taip:

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

Dabar įkėlimo vartotojo sąsaja parodys įkėlimo pranešimą ir pateiks besisukančių linijų sukimo animaciją, kad būtų rodomas vykstantis apdorojimas gaunant „Todos“ duomenis.

Pagerinkite naudotojo patirtį įkeldami vartotojo sąsajas

Įkeltos vartotojo sąsajos įtraukimas į žiniatinklio programas gali žymiai pagerinti vartotojo patirtį. Asinchroninių operacijų metu naudotojams teikdami vaizdinius nurodymus, galite efektyviai sumažinti jų rūpesčius ir bet kokį netikrumą, taigi ir padidinti jų įsitraukimą.