Agregando un loader

Clase 20 de 23 • Curso de Next.js 2018

Sergio Alejandro Trejo Cuxim

student•

Esta es la versión actualizada para Next.js V9

Router.events.on('routeChangeStart', () => NProgress.start() );
Router.events.on('routeChangeComplete', () => NProgress.done() );
Router.events.on('routeChangeError', () => NProgress.done() );

Noel Zenon Callapiña Angles

student•

Muchas Gracias!! tu tip me ayudó!!!

Sergio Toshio Minei

student•

Loaders

Se va a usar nprogress para mostrar un loader al cargar las páginas.

$ npm add nprogress

Para usarlo, se debe agregar las siguientes líneas de código al inicio del componente princioan o Layout:

import NProgress from 'nprogress';
import Router from 'next/router';

Router.onRouteChangeStart = (url) => {
  NProgress.start()
}
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()

Además se debe de agregar la hoja de estilos de nprogress a los estilos globales del proyecto.

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Ivan Trujillo

student•

Custom Hook con el loading del curso:

import * as React from &quot;react&quot;;
import { useRouter } from &quot;next/router&quot;;
import NProgress from &quot;nprogress&quot;;

export const useLoading = () =&gt; {
  const router = useRouter();

  React.useEffect(() =&gt; {
    const handleStart = () =&gt; NProgress.start();
    const handleComplete = () =&gt; NProgress.done();

    router.events.on(&quot;routeChangeStart&quot;, handleStart);
    router.events.on(&quot;routeChangeComplete&quot;, handleComplete);
    router.events.on(&quot;routeChangeError&quot;, handleComplete);

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

Luego lo importan en Layout y lo ejecutan:

import Link from &quot;next/link&quot;;
import Head from &quot;next/head&quot;;
import { useLoading } from &quot;../hooks/useLoading&quot;;

export const Layout = ({
  children,
  title,
}: {
  children: React.ReactChild | React.ReactChild[];
  title: string;
}) =&gt; {
  useLoading();
  return (
    &lt;div className=&quot; flex flex-col h-screen w-screen &quot;&gt;
      &lt;Head&gt;
        &lt;title&gt;{title}&lt;/title&gt;
        &lt;meta
          name=&quot;viewport&quot;
          content=&quot;width=device-width, initial-scale=1&quot;
        &gt;&lt;/meta&gt;
      &lt;/Head&gt;
      &lt;header className=&quot;bg-purple-900 p-4 text-white text-center&quot;&gt;
        &lt;Link href=&quot;/&quot;&gt;
          &lt;a&gt;Podcasts&lt;/a&gt;
        &lt;/Link&gt;
      &lt;/header&gt;

      &lt;div className=&quot;flex flex-col  flex-1  items-center overflow-auto&quot;&gt;
        {children}
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

Raúl F. Bautista Gómez

student•

Aquí encontraran el CSS del ejemplo

Fabián andres Pedraza Borhorquez

student•

Gracias

William Velázquez

student•

Hoja de estilos de nprogress 😃
nprogress.css

William Velázquez

student•

Ejemplo with-loading the next.js
https://github.com/zeit/next.js/tree/canary/examples/with-loading
😄

William Velázquez

student•

Enlace a NProgress.js
http://ricostacruz.com/nprogress/
😃

Pablo Tabares Hernandez

student•

Router.onRouteChangeStart = (url) => { NProgress.start() } Router.onRouteChangeComplete = () => NProgress.done() Router.onRouteChangeError = () => NProgress.done()

Diego Guevara

student•

Hola, como se debe importar en Nextjs una CSS desde un archivo externo?

Diego Forero

Team Platzi•

Puedes usar este plugin https://github.com/zeit/next-plugins/tree/master/packages/next-css

Diego Guevara

student•

Gracias!

Carlos Arboleda

student•

Por si quieren crear su propio Loading component…

import { useRouter } from 'next/router';

const Loading = () =&gt; {
	const router = useRouter();
	const [ loading, setLoading ] = React.useState('');

	React.useEffect(() =&gt; {
		const handleStart = (url) =&gt; url !== router.pathname &amp;&amp; setLoading(true);
		const handleComplete = (url) =&gt; url !== router.pathname &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;div&gt;Loading...&lt;/div&gt;;
};

export default Loading;

Despues solo importenlo en Layout 🙃