I have to show a loading white overlay page when Route changes in next js . i used n-progess , it's working . but i have to show a white overlay page instead of the n-progress . my _app.js is written in class based views . so i don't know where i can put those code. i tried lot of ways . but no one is not working.

_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 .