Estoy usando la animación de la barra de progreso mientras cambio de ruta. Lo que quiero es poder poner una animación de carga en segundo plano cuando la página se carga por primera vez. Cómo puedo hacer eso ? No quiero una animación diferente cuando cambia la ruta.

Solo quiero animar solo la carga de la primera página. No se cambiaron las rutas.

Mi código aquí:

 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;