Show/hide a loading screen, message or animation on client side routing in Next.js

nextjs-loading-screen.js

import { useState, useEffect } from "react";
import Router from "next/router";

const Layout = props => {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const updateLoadingStatus = () => setIsLoading(!isLoading);

    Router.events.on("routeChangeStart", updateLoadingStatus);
    Router.events.on("routeChangeComplete", updateLoadingStatus);

    return () => {
      Router.events.off("routeChangeStart", updateLoadingStatus);
      Router.events.off("routeChangeComplete", updateLoadingStatus);
    };
  }, [isLoading]);

  return (
    <div>
      { isLoading ? <p>Loading...</p> : props.children }
    </div>
  );
}

export default Layout;