Discussion on: [NextJS] smooth routing when SSR

[David Joseph Guzsik]

I just pulled in react-topbar-progress-indicator from NPM and connected it to the same routing events, works equally well and the user is not left waiting with nothing happening

import React, { useEffect, useState } from 'react';
import { Router } from 'next/router';
import TopBarProgress from 'react-topbar-progress-indicator';

TopBarProgress.config({
  barColors: ['rgba(255,0,0,.75)'],
  shadowBlur: 5,
  barThickness: 2,
});

const ProgressIndicator: React.FC = () => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const start = () => void setVisible(true);
    const complete = () => void setVisible(false);

    Router.events.on('routeChangeStart', start);
    Router.events.on('routeChangeComplete', complete);
    Router.events.on('routeChangeError', complete);

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

  return <>{visible && <TopBarProgress />}</>;
};

export default ProgressIndicator;

[Julio Lima]

Thank for it. useRoutes().events Doesn't work for me.