Implement loading screen on Nextjs

_app.tsx

import type { AppProps } from 'next/app';
import { ThemeProvider } from 'next-themes';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

// styles
import 'tailwindcss/tailwind.css';
import '@/styles/tailwind.css';
import '@/styles/globals.scss';

function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const [pageLoading, setPageLoading] = useState<boolean>(false);

  useEffect(() => {
    const handleStart = () => {
      setPageLoading(true);
    };
    const handleComplete = () => {
      setPageLoading(false);
    };

    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);
  }, [router]);

  return (
    <ThemeProvider attribute='class'>
      {pageLoading ? (
          <div className='bg-main-dark h-screen w-screen flex items-center justify-center text-5xl'>
            {' '}
            Loading...
          </div>
      ) : (
        <>
          <Component {...pageProps} />
        </>
      )}
    </ThemeProvider>
  );
}

export default App;