Mettre en place un loader au changement d'une page Nextjs
Pourquoi mettre en place un loader ?
La mise en place d'un loader permet à 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çu sa requête.
Prérequis
La mise en place de ce loader se fera dans le Layout de votre site internet NextJS. Il faut donc bien avoir créé un fichier Layout.js (ou un nom équivalant) qui reprendra la base de vos pages dans votre projet.
Qu'est ce que le Layout ?
Le layout est un composant qui sera présent partout sur le site web, son code JSX et CSS sera appliqué sur toutes les pages du site.
Typiquement, on met dans le layout la base de chacune de nos pages : les balises head, le style CSS ainsi que les entêtes ou encore les pieds de page.
Création du loader
Nous allons faire une fonction qui verifie si l'URL change. Si c'est le cas, on change l'état du useState qui permet d'activer ou non le loader sur true. Dans ce cas, on retourne du code JSX qui s'affichera tant que la nouvelle page n'est pas chargée.
Dans le cas suivant, on écrit simplement un texte de chargement.
1.On commence par écrire une fonction dans laquelle on appelle le router et où on crée l'état du loading:
function Loading() {
const router = useRouter();
const [loading, setLoading] = useState(false);
}
2.On y ajoute un useEffect qui servira à vérifier si l'URL change.
useEffect(() => {
const handleStart = (url) => (url !== router.asPath) && setLoading(true);
const handleComplete = (url) => (url === router.asPath) && setLoading(false);
router.events.on('routeChangeStart', handleStart)
router.events.on('routeChangeComplete', handleComplete)
router.events.on('routeChangeError', handleComplete)
return () => {
router.events.off('routeChangeStart', handleStart)
router.events.off('routeChangeComplete', handleComplete)
router.events.off('routeChangeError', handleComplete)
}
})Quand le changement de page débute, on appele la fonction handleStart, qui change la valeur de loading sur TRUE.
Quand il se termine ou qu'il échoue, on appelle la fonction handleComplete, qui change la valeur de loading sur FALSE.
3.On retourne enfin du JSX.
return loading && (
<>
Chargement...
</>
);Ce JSX est le contenu qui est affiché au changement de la page.
Code obtenu
function Loading() {
const router = useRouter();
const [loading, setLoading] = useState(false);
useEffect(() => {
const handleStart = (url) => (url !== router.asPath) && setLoading(true);
const handleComplete = (url) => (url === router.asPath) && setLoading(false);
router.events.on('routeChangeStart', handleStart)
router.events.on('routeChangeComplete', handleComplete)
router.events.on('routeChangeError', handleComplete)
return () => {
router.events.off('routeChangeStart', handleStart)
router.events.off('routeChangeComplete', handleComplete)
router.events.off('routeChangeError', handleComplete)
}
})
return loading && (
<>
Chargement...
</>);
}Par la suite, nous allons devoir ajouter la balise <Loading /> dans le JSX du composant. Celle-ci permet d'appeler la fonction précédemment créée. Le loader s'affichera donc à l'endroit exact où vous placerez la balise.
Par exemple - Layout.js :
// Composant
import Loader from "loader.js";
export default function Layout(props) {
return (
<>
// Tous vos composants
<Loader />
</>
)
}
