React code splitting – parte 4

Negli articoli precedenti abbiamo visto come con l’utilizzo dell’API lazy() e della Suspense sia possibile migliorare la user experience delle applicazioni pacchettizzando in un bundle separati i vari componenti e scaricandoli solo quando ne abbiamo realmente la necessità. Inoltre, utilizzando la Suspense è possibile visualizzare un fallback durante il caricamento di componenti lazy.

Nell’utilizzo di tutti i giorni, però, non sempre è possibile visualizzare il fallback, a causa di una latenza davvero minima che rende il componente Suspense praticamente invisibile.

In questo post proveremo a simulare la latenza utilizzando la funzione setTimeout() che ci consentirà di risolvere la Promise solo dopo N secondi. Proprio questo numero di secondi ci consentirà di simulare l’esperienza utente con una latenza in scaricamento.

Modifichiamo quindi il codice del post precedente nel seguente modo:

const MyFeature = React.lazy(() =>
	Promise.all([
		import("./MyFeature"),
			new Promise((resolve) => {
				setTimeout(() => {resolve();}, 10000);}),
			]).then(([m]) => m)
		);
	
	function MyPage() {
		return (
			<>
				<h1>My Page</h1>
  				<MyFeature />
			</>
		);
}

Nella definizione del lazy è stata introdotta la Promise.all() che si risolve quando tutte le Promise al suo interno si sono risolte. In questo esempio stiamo passando due Promise alla funzione: la prima è quella che riguarda l’import del componente (e che senza latenza si risolve immediatamente) e la seconda quella che si risolvere allo scattare del timeout (in questo caso dopo 10 secondi). Quanto tutte le promise sono risolte, viene richiamato il metodo .then() dove i valori vengono passati sotto forma di array. Il .then() restituisce il primo elemento dell’array che è proprio quello che si aspetta lazy().

Eseguendo il codice precedente siamo finalmente nella condizione di poter visualizzare il nostro fallback.

Creazione di uno spinner come funzione di fallback

Dopo aver analizzato il codice alla base della simulazione della fallback ed aver scoperto le funzionalità dell’API lazy e Suspense, vediamo come sia possibile creare uno spinner accattivamente da visualizzare durante il caricamento lazy.

Negli esempio precedenti abbiamo inserito come elemento di fallback un semplice testo (Loading…) ad indicare il caricamento dei componenti lazy. In realtà all’interno della prop fallback può essere inserito qualsiasi componente. Una libreria molto utilizzata per la realizzazione di spinner è react-spinners che ha al suo interno una serie di componenti spinners già pronti per l’utilizzo. Utilizziamo, ad esempio, lo spinner FadeLoader con una dimensione di 150px e con un colore lightblue.

Possiamo quindi modificare il codice precedente introducendo lo spinner:

import { FadeLoader } from "react-spinners";
import MyPage from "./MyPage";

function App() {
return (
		<React.Suspense fallback={<FadeLoader color={"lightblue"} size={150} />}>
			<MyPage />
		</React.Suspense>
	);
}

Ora, al posto del testo viene renderizzato lo spinner.