No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Next.js 2018

Curso de Next.js 2018

Roberto González

Roberto González

Agregando un loader

20/23
Recursos

Aportes 5

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

Custom Hook con el loading del curso:

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

export const useLoading = () => {
  const router = useRouter();

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

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

Luego lo importan en Layout y lo ejecutan:

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

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

      <div className="flex flex-col  flex-1  items-center overflow-auto">
        {children}
      </div>
    </div>
  );
};

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

Por si quieren crear su propio Loading component…

import { useRouter } from 'next/router';

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

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

export default Loading;

Despues solo importenlo en Layout 🙃