<h2>Pourquoi mettre en place un loader ?</h2>
La mise en place d'un loader permet &agrave; l'utilisateur de savoir ce qu'il se passe sur le site. En effet, il serait dommage qu'il ne se passe rien sur notre page... Le loader permet de communiquer avec l'utilisateur, de lui montrer que nous avons bien re&ccedil;u sa requ&ecirc;te.
&nbsp;
<h2>Pr&eacute;requis</h2>
La mise en place de ce loader se fera dans le&nbsp;Layout&nbsp;de votre site internet NextJS. Il faut donc bien avoir cr&eacute;&eacute; un fichier&nbsp;<code>Layout.js</code>&nbsp;(ou un nom &eacute;quivalant) qui reprendra la base de vos pages dans votre projet.
&nbsp;
<h3>Qu'est ce que le Layout ?</h3>
Le layout est un composant qui sera pr&eacute;sent partout sur le site web, son code&nbsp;JSX&nbsp;et CSS sera appliqu&eacute; sur toutes les pages du site.
Typiquement, on met dans le&nbsp;layout&nbsp;la base de chacune de nos pages : les balises&nbsp;head, le style CSS ainsi que les ent&ecirc;tes ou encore les pieds de page.
&nbsp;
<h2>Cr&eacute;ation du loader</h2>
Nous allons faire une fonction qui verifie si l'URL change. Si c'est le cas, on change l'&eacute;tat du&nbsp;<code>useState</code>&nbsp;qui permet d'activer ou non le loader sur&nbsp;<code>true</code>. Dans ce cas, on retourne du code&nbsp;JSX&nbsp;qui s'affichera tant que la nouvelle page n'est pas charg&eacute;e.
Dans le cas suivant, on &eacute;crit simplement un texte de chargement.
1.On commence par &eacute;crire une fonction dans laquelle on appelle le&nbsp;router&nbsp;et o&ugrave; on cr&eacute;e l'&eacute;tat du&nbsp;loading:
<pre class="language-javascript"><code>function Loading() {
 const router = useRouter();

 const [loading, setLoading] = useState(false);
}</code></pre>
&nbsp;
2.On y ajoute un&nbsp;<code>useEffect</code>&nbsp;qui servira &agrave; v&eacute;rifier si l'URL change.
<pre class="language-javascript"><code>useEffect(() =&gt; {
 const handleStart = (url) =&gt; (url !== router.asPath) &amp;&amp; setLoading(true);
 const handleComplete = (url) =&gt; (url === router.asPath) &amp;&amp; setLoading(false);

 router.events.on('routeChangeStart', handleStart)
 router.events.on('routeChangeComplete', handleComplete)
 router.events.on('routeChangeError', handleComplete)

 return () =&gt; {
 router.events.off('routeChangeStart', handleStart)
 router.events.off('routeChangeComplete', handleComplete)
 router.events.off('routeChangeError', handleComplete)
 }
 })</code></pre>
Quand le changement de page d&eacute;bute, d&eacute;t&eacute;ct&eacute; par <code>router.event.on('routeChangeStart')</code>, on appele la fonction <code>handleStart</code>, qui change la valeur de&nbsp;loading&nbsp;sur&nbsp;TRUE. Quand il se termine (<code>router.event.on('routeChangeComplete')</code>) ou qu'il &eacute;choue (<code>router.event.on('routeChangeError')</code>,) on appelle la fonction <code>handleComplete</code>, qui change la valeur de&nbsp;loading&nbsp;sur&nbsp;FALSE.
Ici, <code>handleStart </code>et <code>handleComplete </code>v&eacute;rifient une seconde fois le changement de page, puis changent la valeur de loading
&nbsp;
3.On retourne enfin du JSX.
<pre class="language-javascript"><code>return loading &amp;&amp; (
 &lt;&gt;
 Chargement...
 &lt;/&gt;
);</code></pre>
C'est ce JSX qui est affich&eacute; au changement de la page.
&nbsp;
<h2>Code obtenu</h2>
<pre class="language-javascript"><code>function Loading() {
 const router = useRouter();

 const [loading, setLoading] = useState(false);


 useEffect(() =&gt; {
 const handleStart = (url) =&gt; (url !== router.asPath) &amp;&amp; setLoading(true);
 const handleComplete = (url) =&gt; (url === router.asPath) &amp;&amp; setLoading(false);

 router.events.on('routeChangeStart', handleStart)
 router.events.on('routeChangeComplete', handleComplete)
 router.events.on('routeChangeError', handleComplete)

 return () =&gt; {
 router.events.off('routeChangeStart', handleStart)
 router.events.off('routeChangeComplete', handleComplete)
 router.events.off('routeChangeError', handleComplete)
 }
 })

 return loading &amp;&amp; (
 &lt;&gt;
 Chargement...
 &lt;/&gt;);
 }</code></pre>
Par la suite, nous allons devoir ajouter la balise&nbsp;<code>&lt;Loading /&gt;</code>&nbsp;dans le JSX du composant. Celle-ci permet d'appeler la fonction pr&eacute;c&eacute;demment cr&eacute;&eacute;e. Le loader s'affichera donc &agrave; l'endroit exact o&ugrave; vous placerez la balise.
Par exemple -&nbsp;Layout.js&nbsp;:
<pre class="language-javascript"><code>// Composant
import Loader from "loader.js";

export default function Layout(props) {
 return (
 &lt;&gt;
 // Tous vos composants
 &lt;Loader /&gt;
 &lt;/&gt;
 )
}</code></pre>
&nbsp;
<h2>Ressources</h2>
<ul>
<li><a href="https://uiball.com/loaders/">Liste de loaders simples</a></li>
<li><a href="https://www.npmjs.com/package/react-loader-spinner">Librairie JS de loaders et spinners</a></li>
</ul>

CreaDev

Mettre en place un loader au changement d'une page Nextjs