I am using progress bar animation while changing routes. What I want is to be able to put a loading animation in the background when the page is first loaded. How can I do that ? I don't want a different animation when the route changes.

I just want to animation only the first page load. Not routes changed.

My code here :

const progress = new ProgressBar({
  size: 4,
  color: '#FE595E',
  className: 'z-50',
  delay: 100,
});

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

// END

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      <Layout>
        <ToastContainer position='top-right' />
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  );
}

export default MyApp;