UI un vizuālo elementu ielāde ir svarīgas tīmekļa un mobilo lietojumprogrammu sastāvdaļas; tiem ir galvenā loma lietotāju pieredzes un iesaistīšanās uzlabošanā. Bez šādām norādēm lietotāji varētu kļūt neizpratnē un neziņā par to, vai lietojumprogramma darbojas pareizi, vai tā ir aktivizējusi pareizās darbības un vai viņu darbības tiek apstrādātas.

Sniedzot lietotājiem dažādas vizuālas norādes, kas norāda uz notiekošo apstrādi, jūs varat efektīvi mazināt jebkāda veida nenoteiktība un neapmierinātība, kas galu galā attur viņus no priekšlaicīgas iziešanas no lietojumprogrammas.

UI ielādes ietekme uz veiktspēju un lietotāja pieredzi

Džeikoba Nīlsena desmit heiristikas lietotāja interfeisa dizainam uzsver, cik svarīgi ir nodrošināt pašreizējo sistēmas statusu, kas ir redzams gala lietotājiem. Šis princips izceļ vajadzību pēc lietotāja interfeisa komponentiem, piemēram, ielādes lietotāja interfeisu un citu atgriezenisko saiti elementi, lai nekavējoties sniegtu lietotājiem atbilstošu atgriezenisko saiti par notiekošajiem procesiem un nepieciešamajā robežās laika posms.

UI ielādei ir galvenā loma lietojumprogrammu vispārējās veiktspējas un lietotāja pieredzes veidošanā. No veiktspējas viedokļa efektīvu ielādes ekrānu ieviešana var ievērojami palielināt tīmekļa lietojumprogrammas ātrumu un reaģētspēju.

Ideālā gadījumā efektīva ielādes lietotāja saskarņu izmantošana nodrošina asinhronu satura ielādi — tas neļauj visai lapai sastingt, kamēr fonā tiek ielādēti konkrēti komponenti; būtībā, radot vienmērīgāku pārlūkošanas pieredzi.

Turklāt, piedāvājot skaidru vizuālu norādi par notiekošajiem procesiem, lietotāji, visticamāk, pacietīgi gaidīs satura izgūšanu.

Darba sākšana ar React Suspense vietnē Next.js 13

Neziņa ir React komponents, kas pārvalda asinhronas darbības, kas darbojas fonā, piemēram, datu ienešanu. Vienkārši sakot, šis komponents ļauj renderēt atkāpšanās komponentu, līdz paredzētais pakārtotais komponents ir uzstādīts un ielādēt nepieciešamos datus.

Šeit ir piemērs tam, kā Suspense darbojas. Pieņemsim, ka jums ir komponents, kas ienes datus no API.

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

Suspense parādīs Notiek ielāde sastāvdaļa līdz saturam Todos komponents pabeidz ielādi un ir gatavs renderēšanai. Lūk, Suspense sintakse, lai to panāktu:

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

 </Suspense>
 </>
 );}

Next.js 13 atbalsta React Suspense

Next.js 13 pievienoja Suspense atbalstu, izmantojot savu lietotņu direktoriju funkciju. Būtībā, darbs ar lietotņu direktoriju ļauj iekļaut un sakārtot lappušu failus konkrētam maršrutam speciālā mapē.

Šajā maršruta direktorijā varat iekļaut a loading.js failu, kuru Next.js pēc tam izmantos kā atkāpšanās komponentu, lai parādītu ielādes lietotāja saskarni pirms pakārtotā komponenta renderēšanas ar tā datiem.

Tagad integrēsim React Suspense programmā Next.js 13, izveidojot demonstrācijas uzdevumu lietojumprogrammu.

Jūs varat atrast šī projekta kodu tajā GitHub krātuve.

Izveidojiet Next.js 13 projektu

Jūs izveidosit vienkāršu lietojumprogrammu, kas ienes uzdevumu sarakstu no vietnes DummyJSON API galapunkts. Lai sāktu, palaidiet tālāk norādīto komandu, lai instalētu Next.js 13.

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

Definējiet Todos maršrutu

Iekšpusē src/app direktorijā, izveidojiet jaunu mapi un piešķiriet tai nosaukumu Todos. Šajā mapē pievienojiet jaunu page.js failu un iekļaujiet tālāk norādīto kodu.

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;

asinhronā funkcija, Todos, ienes uzdevumu sarakstu no DummyJSON API. Pēc tam tas kartē ienesto uzdevumu masīvu, lai pārlūkprogrammas lapā parādītu uzdevumu sarakstu.

Turklāt kods ietver asinhrono pagaidi funkcija, kas simulē aizkavi, izveidojot scenāriju, kas ļaus lietotājam redzēt ielādes lietotāja interfeisu noteiktu laiku pirms ienesto uzdevumu parādīšanas.

Reālākā lietošanas gadījumā; tā vietā, lai simulētu kavēšanos, situācijas, piemēram, apstrādes darbības lietojumprogrammās, datu izgūšana no datu bāzēm, patērējot API, vai pat lēni API atbildes laiki varētu izraisīt nelielu aizkavi.

Integrējiet React Suspense lietojumprogrammā Next.js

Atveriet app/layout.js failu un atjauniniet standarta Next.js kodu ar šādu 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 fails Next.js 13 kalpo kā centrālais izkārtojuma komponents, kas nosaka lietojumprogrammas izkārtojuma vispārējo struktūru un darbību. Šajā gadījumā, nokārtojot bērniem balsts uz Neziņa komponents, nodrošina, ka izkārtojums kļūst par visa lietojumprogrammas satura iesaiņojumu.

The Neziņa komponents parādīs Notiek ielāde komponents kā rezerves komponents, kamēr pakārtotie komponenti asinhroni ielādē savu saturu; norādot lietotājam, ka saturs tiek ienests vai apstrādāts fonā.

Atjauniniet mājas maršruta failu

Atveriet app/page.js failu, izdzēsiet standarta Next.js kodu un pievienojiet tālāk norādīto kodu.

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;

Izveidojiet failu loading.js

Visbeidzot, turpiniet un izveidojiet a loading.js failu iekšpusē lietotne/uzdevumi direktoriju. Šajā failā pievienojiet tālāk norādīto kodu.

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

Mūsdienu vērpēju pievienošana lietotāja saskarnes ielādes komponentam

Jūsu izveidotais ielādes lietotāja interfeisa komponents ir ļoti vienkāršs; pēc izvēles varat izvēlēties pievienot skeleta ekrānus. Varat arī izveidot un veidot pielāgotus ielādes komponentus izmantojot Tailwind CSS savā Next.js lietojumprogrammā. Pēc tam pievienojiet lietotājam draudzīgas ielādes animācijas, piemēram, vērpējus, ko nodrošina tādas pakotnes kā React Spinners.

Lai izmantotu šo pakotni, turpiniet un instalējiet to savā projektā.

npm install react-loader-spinner --save

Pēc tam atjauniniet savu loading.js failu šādi:

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

Tagad ielādes lietotāja interfeiss parādīs ielādes ziņojumu un atveidos rotējošu līniju griežamā animāciju, lai norādītu uz notiekošo apstrādi, ienesot Todos datus.

Uzlabojiet lietotāja pieredzi, ielādējot lietotāja saskarnes

Ielādes lietotāja saskarņu iekļaušana tīmekļa lietojumprogrammās var ievērojami uzlabot lietotāja pieredzi. Sniedzot lietotājiem vizuālas norādes asinhrono darbību laikā, jūs varat efektīvi samazināt viņu bažas un neskaidrības un tādējādi palielināt viņu iesaistīšanos.