Agregando un loader

Clase 20 de 23 • Curso de Next.js 2018

Comentarios

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 😃

William Velázquez

student•

Ejemplo with-loading the next.js

😄

William Velázquez

student•

Enlace a NProgress.js

😃

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

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 🙃

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

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

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

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

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;

Agregando un loader

Introducción a Next.JS

¿Dónde aprender Next.js actualizado?

¿Qué es Next.JS?

Creando nuestra primera página

Styled JSX

Server Side Rendering

Aprende qué es Server Side Rendering

Intro a getInitialProps

Utilizando el componente Link

Recibiendo Parámetros

Performance de Get Initial Props

Vista de Podcasts

Componentes Reutilizables

Creando componentes en React

Reorganizar la vista de podcasts

Navegación Avanzada

Gestionando Errores

Personalizando errores

¿Cómo diseñar URLs?

Configurando Next Routes

Implementando Next Routes

Vistas Híbridas

Implementar el Modal

Agregando un loader

Publicando nuestra app

Mejores prácticas en Github

Publicar la app con now

Conclusiones del curso