Käyttöliittymien ja visuaalisten elementtien lataaminen ovat tärkeitä komponentteja verkko- ja mobiilisovelluksissa; niillä on keskeinen rooli käyttäjäkokemuksen ja sitoutumisen parantamisessa. Ilman tällaisia ​​vihjeitä käyttäjät saattavat olla ymmällään ja epävarmoja siitä, toimiiko sovellus oikein, käynnistivätkö he oikeat toiminnot vai käsitelläänkö heidän toimiaan.

Tarjoamalla käyttäjille erilaisia ​​visuaalisia vihjeitä, jotka osoittavat jatkuvaa käsittelyä, voit tehokkaasti lieventää kaikenlaista epävarmuutta ja turhautumista, mikä viime kädessä estää heitä poistumasta sovelluksesta ennenaikaisesti.

Käyttöliittymän lataamisen vaikutus suorituskykyyn ja käyttökokemukseen

Jakob Nielsenin kymmenen käyttöliittymäsuunnittelun heuristiikkaa korostaa, kuinka tärkeää on varmistaa, että järjestelmän nykyinen tila on loppukäyttäjien nähtävillä. Tämä periaate korostaa käyttöliittymäkomponenttien, kuten latauskäyttöliittymien ja muiden palautekäyttöliittymän tarvetta elementtejä, jotka antavat käyttäjille viipymättä asianmukaista palautetta käynnissä olevista prosesseista ja vaaditun rajoissa aikaikkuna.

Käyttöliittymien lataaminen on keskeinen rooli sovellusten yleisen suorituskyvyn ja käyttökokemuksen muovaamisessa. Suorituskyvyn näkökulmasta tehokkaiden latausnäyttöjen käyttöönotto voi merkittävästi parantaa verkkosovelluksen nopeutta ja reagointikykyä.

Ihannetapauksessa latauskäyttöliittymien tehokas hyödyntäminen mahdollistaa asynkronisen sisällön lataamisen – tämä estää koko sivua jumiutumasta tiettyjen komponenttien latautuessa taustalla. pohjimmiltaan luomalla sujuvamman selauskokemuksen.

Lisäksi tarjoamalla selkeän visuaalisen osoituksen käynnissä olevista prosesseista käyttäjät odottavat todennäköisemmin kärsivällisesti sisällön hakua.

React Suspensen käytön aloittaminen Next.js: ssä 13

Jännitystä on React-komponentti, joka hallitsee taustalla suoritettavia asynkronisia toimintoja, kuten tietojen hakemista. Yksinkertaisesti sanottuna tämän komponentin avulla voit renderöidä varakomponentin, kunnes aiottu alikomponentti liittää ja lataa vaaditut tiedot.

Tässä on esimerkki Suspensen toiminnasta. Oletetaan, että sinulla on komponentti, joka hakee tietoja API: sta.

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

Suspense näyttää Ladataan komponentin sisältöön asti Todos komponentti on latautunut ja on valmis renderöitäväksi. Tässä on Suspense-syntaksi tämän saavuttamiseksi:

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

 </Suspense>
 </>
 );}

Next.js 13 tukee React Suspensea

Next.js 13 lisäsi Suspensen tuen sovellushakemistoominaisuuden kautta. Pohjimmiltaan työskennellä sovellushakemiston kanssa voit sisällyttää ja järjestää tietyn reitin sivutiedostoja erilliseen kansioon.

Tähän reittihakemistoon voit sisällyttää a loading.js tiedosto, jota Next.js käyttää sitten varakomponenttina näyttääkseen latauskäyttöliittymän ennen alikomponentin hahmontamista tietojen kanssa.

Integroidaan nyt React Suspense Next.js 13:een rakentamalla demo To-Do -sovellus.

Löydät tämän projektin koodin siitä GitHub arkisto.

Luo Next.js 13 -projekti

Rakennat yksinkertaisen sovelluksen, joka hakee luettelon tehtävistä DummyJSON API päätepiste. Aloita suorittamalla alla oleva komento asentaaksesi Next.js 13.

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

Määritä Todos-reitti

Sisällä src/app hakemistoon, luo uusi kansio ja anna sille nimi Todos. Lisää tähän kansioon uusi page.js tiedosto ja liitä mukaan alla oleva koodi.

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;

Asynkroninen toiminto, Todos, hakee luettelon tehtävistä DummyJSON-sovellusliittymästä. Sitten se kartoittaa haettujen tehtävien joukon ja tekee luettelon tehtävistä selainsivulla.

Lisäksi koodi sisältää asynkronisen odota toiminto, joka simuloi viivettä ja luo skenaarion, jonka avulla käyttäjä näkee latauskäyttöliittymän tietyn ajan ennen haettujen tehtävien näyttämistä.

Realistisemmassa käyttötapauksessa; viiveen simuloinnin sijaan tilanteet, kuten sovellusten käsittelytoiminnot, tietojen hakeminen tietokannoista, kuluttaa API: ita, tai jopa hitaat API-vasteajat aiheuttaisivat lyhyitä viiveitä.

Integroi React Suspense Next.js-sovellukseen

Avaa app/layout.js tiedosto ja päivitä yleiskuvaus Next.js-koodi seuraavalla koodilla.

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 Tiedosto Next.js 13:ssa toimii keskeisenä asettelukomponenttina, joka määrittää sovelluksen asettelun yleisen rakenteen ja toiminnan. Tässä tapauksessa ohitetaan lapset tuki siihen Jännitystä komponentti, varmistaa, että asettelusta tulee kääre koko sovelluksen sisällölle.

The Jännitystä komponentti näyttää Ladataan komponentti varaosana, kun alikomponentit lataavat sisältöään asynkronisesti; ilmaisee käyttäjälle, että sisältöä haetaan tai käsitellään taustalla.

Päivitä kotireittitiedosto

Avaa app/page.js tiedosto, poista yleiskoodi Next.js-koodi ja lisää alla oleva koodi.

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;

Luo loading.js-tiedosto

Jatka lopuksi ja luo a loading.js tiedosto sisällä app/Todos hakemistosta. Lisää tähän tiedostoon alla oleva koodi.

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

Nykyaikaisten pyörähdysten lisääminen käyttöliittymäkomponenttiin

Luomasi latauskäyttöliittymäkomponentti on hyvin yksinkertainen; voit halutessasi lisätä luurankonäyttöjä. Vaihtoehtoisesti voit luoda ja muotoilla mukautettuja latauskomponentteja käyttämällä Tailwind CSS: ää Next.js-sovelluksessasi. Lisää sitten käyttäjäystävällisiä latausanimaatioita, kuten spinnereita, joita tarjoavat paketit, kuten React Spinners.

Jos haluat käyttää tätä pakettia, asenna se projektiisi.

npm install react-loader-spinner --save

Päivitä seuraavaksi loading.js tiedosto seuraavasti:

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

Latauskäyttöliittymä näyttää nyt latausviestin ja hahmontaa pyörivän rivin pyörivän animaation, joka ilmaisee käynnissä olevan käsittelyn Todos-tietoja haettaessa.

Paranna käyttökokemusta lataamalla käyttöliittymiä

Latauskäyttöliittymien sisällyttäminen verkkosovelluksiin voi parantaa käyttökokemusta merkittävästi. Tarjoamalla käyttäjille visuaalisia vihjeitä asynkronisten toimintojen aikana voit tehokkaasti minimoida heidän huolensa ja epävarmuustekijänsä ja maksimoida heidän sitoutumisensa.