Tengo que mostrar una página de superposición blanca de carga cuando la ruta cambia en el siguiente js. Usé n-progess, está funcionando. pero tengo que mostrar una página de superposición blanca en lugar de n-progress. my _app.js está escrito en vistas basadas en clases. así que no sé dónde puedo poner esos códigos. Intenté muchas maneras. pero nadie no está trabajando.

_app.jsx

 function Loading() { const router = useRouter(); const [loading, setLoading] = useState(false); useEffect(() => { const handleStart = (url) => url !== router.asPath && setLoading(true); const handleComplete = (url) => url === router.asPath &&setLoading(false) router.events.on('routeChangeStart', handleStart); router.events.on('routeChangeComplete', handleComplete); router.events.on('routeChangeError', handleComplete); return () => { router.events.off('routeChangeStart', handleStart); router.events.off('routeChangeComplete', handleComplete); router.events.off('routeChangeError', handleComplete); }; }); return ( loading && ( <div className="spinner-wrapper" style={{ height: '100%', width: '100%', backgroundColor: 'blue', }}> <div className="spinner" style={{ width: '50px', height: '50px' }}></div> </div> ) ); } class MyApp extends App { constructor(props) { super(props); this.persistor = persistStore(props.store); } componentDidMount() { setTimeout(function () { document.getElementById('__next').classList.add('loaded'); }, 100); this.setState({ open: true }); } render() { const { Component, pageProps, store } = this.props; const getLayout = Component.getLayout || ((page) => <DefaultLayout children={page} />); return getLayout( <Provider store={store}> <PersistGate loading={<Component {...pageProps} />} persistor={this.persistor}> <Loading /> <Component {...pageProps} /> </PersistGate> </Provider> ); } } export default withRedux(createStore)(withReduxSaga(MyApp))``` what changes needed in this case ? how can do those things ? sorry for my poor English , Thank you .