페이지 이동시 로딩

• routeChangeStart(url, { shallow }) 라우트가 변경되기 시작할때 트리거 됩니다
• routeChangeComplete(url, { shallow }) - 라우트가 완전히 변경되었을 때 트리거 됩니다
• routeChangeError(err, url, { shallow }) - 라우트 변경 중에 에러가 발생했거나, 취소되었을 때 트리거 됩니다

useEffect 훅을 사용한 loading 상태 관리 이벤트 등록

mount 해제시 등록한 이벤트 해제

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

  const start = () => {
    setIsLoading(true);
  };

  const end = () => {
    setIsLoading(false);
  };

  useEffect(() => {
    Router.events.on('routeChangeStart', start);
    Router.events.on('routeChangeComplete', end);
    Router.events.on('routeChangeError', end);

    return () => {
      Router.events.off('routeChangeStart', start);
      Router.events.off('routeChangeComplete', end);
      Router.events.off('routeChangeError', end);
    };
  }, []);

  return isLoading;
};

최상위 컴포넌트에 설정

_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  const isLoading = useLoadingIndicator();

  return (
			<>
	      {isLoading && (
	          <Spinner />
	      )}
	      <Component {...pageProps} />
			</>
  );
}