Il caricamento delle interfacce utente e degli elementi visivi sono componenti importanti nelle applicazioni web e mobili; svolgono un ruolo fondamentale nel migliorare l'esperienza e il coinvolgimento dell'utente. Senza tali segnali, gli utenti potrebbero rimanere perplessi e incerti sul corretto funzionamento dell'applicazione, se hanno attivato le azioni giuste o se le loro azioni vengono elaborate.

Fornendo agli utenti vari segnali visivi che indicano l'elaborazione in corso, è possibile mitigarla in modo efficace qualsiasi forma di incertezza e frustrazione, dissuadendoli infine dall'uscire prematuramente dall'applicazione.

Impatto del caricamento delle interfacce utente sulle prestazioni e sull'esperienza utente

Le dieci euristiche di Jakob Nielsen per la progettazione dell’interfaccia utente sottolineano l’importanza di garantire che lo stato attuale del sistema sia visibile agli utenti finali. Questo principio evidenzia la necessità di componenti dell'interfaccia utente come il caricamento di interfacce utente e altre interfacce utente di feedback elementi per fornire tempestivamente agli utenti feedback adeguati, sui processi in corso, e nei limiti richiesti lasso di tempo.

Le interfacce utente di caricamento svolgono un ruolo fondamentale nel modellare le prestazioni complessive e l'esperienza utente delle applicazioni. Dal punto di vista delle prestazioni, l'implementazione di schermate di caricamento efficaci può migliorare significativamente la velocità e la reattività di un'applicazione Web.

Idealmente, l'utilizzo efficace delle interfacce utente di caricamento consente il caricamento asincrono dei contenuti: ciò impedisce il blocco dell'intera pagina mentre componenti specifici vengono caricati in background; essenzialmente, creando un'esperienza di navigazione più fluida.

Inoltre, offrendo una chiara indicazione visiva dei processi in corso, è più probabile che gli utenti attendano pazientemente il recupero dei contenuti.

Iniziare con React Suspense in Next.js 13

Suspense è un componente React che gestisce le operazioni asincrone in esecuzione in background, come il recupero dei dati. In poche parole, questo componente consente di eseguire il rendering di un componente di fallback finché il componente figlio previsto non monta e carica i dati richiesti.

Ecco un esempio di come funziona la suspense. Supponiamo che tu abbia un componente che recupera i dati da un'API.

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

La suspense mostrerà il Caricamento componente fino al contenuto del file Tutto il componente termina il caricamento ed è pronto per il rendering. Ecco la sintassi Suspense per raggiungere questo obiettivo:

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

 </Suspense>
 </>
 );}

Next.js 13 Supporta la suspense di reazione

Next.js 13 ha aggiunto il supporto per Suspense tramite la sua funzionalità di directory delle app. Essenzialmente, lavorare con la directory dell'app consente di includere e organizzare file di pagina per un percorso particolare all'interno di una cartella dedicata.

All'interno di questa directory del percorso è possibile includere a caricamento.js file, che Next.js utilizzerà quindi come componente di fallback per visualizzare l'interfaccia utente di caricamento prima di eseguire il rendering del componente figlio con i suoi dati.

Ora integriamo React Suspense in Next.js 13 creando un'applicazione To-Do demo.

Puoi trovare il codice di questo progetto nel suo file GitHub deposito.

Crea un progetto Next.js 13

Costruirai una semplice applicazione che recupererà un elenco di cose da fare dal file API DummyJSON punto finale. Per iniziare, esegui il comando seguente per installare Next.js 13.

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

Definisci un percorso Todos

Dentro il src/app directory, creare una nuova cartella e darle un nome Tutto. All'interno di questa cartella, aggiungine una nuova pagina.js file e includere il codice seguente.

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;

La funzione asincrona, Tutto, recupera un elenco di cose da fare dall'API DummyJSON. Quindi mappa l'array di cose da fare recuperate per visualizzare un elenco di cose da fare nella pagina del browser.

Inoltre, il codice include un file asincrono Aspettare funzione che simula un ritardo, creando uno scenario che consentirà a un utente di vedere un'interfaccia utente di caricamento per una durata specifica prima di visualizzare le cose da fare recuperate.

In un caso d'uso più realistico; invece di simulare un ritardo, situazioni come attività di elaborazione all'interno delle applicazioni, recupero di dati da database, consumare le APIo anche tempi di risposta API lenti potrebbero causare alcuni brevi ritardi.

Integra React Suspense nell'applicazione Next.js

Apri il app/layout.js file e aggiornare il codice boilerplate Next.js con il seguente codice.

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

IL app/layout.js Il file in Next.js 13 funge da componente di layout centrale che definisce la struttura generale e il comportamento del layout dell'applicazione. In questo caso, superando il bambini prop al Suspense componente, garantisce che il layout diventi un wrapper per l'intero contenuto dell'applicazione.

IL Suspense il componente visualizzerà il file Caricamento componente come fallback mentre i componenti secondari caricano il proprio contenuto in modo asincrono; indicando all'utente che il contenuto viene recuperato o elaborato in background.

Aggiorna il file del percorso verso casa

Apri il app/pagina.js file, elimina il codice boilerplate Next.js e aggiungi il codice seguente.

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;

Crea il file load.js

Infine, vai avanti e crea un file caricamento.js file all'interno del app/Tutte le cose directory. All'interno di questo file, aggiungi il codice seguente.

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

Aggiunta di spinner moderni al componente dell'interfaccia utente di caricamento

Il componente dell'interfaccia utente di caricamento che hai creato è molto semplice; puoi facoltativamente scegliere di aggiungere schermate scheletriche. In alternativa, è possibile creare e definire uno stile per i componenti di caricamento personalizzati utilizzando Tailwind CSS nell'applicazione Next.js. Quindi, aggiungi animazioni di caricamento intuitive come gli spinner forniti da pacchetti come Reagiscono i filatori.

Per utilizzare questo pacchetto, vai avanti e installalo nel tuo progetto.

npm install react-loader-spinner --save

Successivamente, aggiorna il tuo caricamento.js archiviare come segue:

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

Ora, l'interfaccia utente di caricamento visualizzerà un messaggio di caricamento e visualizzerà un'animazione con uno spinner di linee rotanti per indicare l'elaborazione in corso durante il recupero dei dati di Todos.

Migliora l'esperienza utente con il caricamento delle interfacce utente

Incorporare le UI di caricamento nelle tue applicazioni web può migliorare significativamente l'esperienza dell'utente. Fornendo agli utenti segnali visivi durante le operazioni asincrone, puoi ridurre al minimo efficacemente le loro preoccupazioni ed eventuali incertezze, e di conseguenza massimizzare il loro coinvolgimento.