How to show a loading bar when changing routes in NextJS?

Question

I am trying to add loading indicator while routes are changing and have some issues with that.
I did, as it is described in next.js docs, also tried like in this article, but somehow loading bar doesn't show up, even though in console I can see the loading and loaded route.

_app.tsx

import { ThemeProvider } from '@mui/styles'
import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import React, { useEffect } from 'react'
import { Hydrate, QueryClient, QueryClientProvider } from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'
import Layout from '../components/Layout'
import ContextProvider from '../contexts/ContextWrapper'
import '../public/nprogress.css'
import theme from '../src/theme'
import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient())

  const router = useRouter()

  useEffect(() => {
    const handleStart = (url: string) => {
      console.log(`Loading: ${url}`)
      NProgress.start()
    }
    const handleStop = (url: string) => {
      console.log(`done: ${url}`)

      NProgress.done()
    }

    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeComplete', handleStop)
    router.events.on('routeChangeError', handleStop)

    return () => {
      router.events.off('routeChangeStart', handleStart)
      router.events.off('routeChangeComplete', handleStop)
      router.events.off('routeChangeError', handleStop)
    }
  }, [router])
  return (
    <ThemeProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <Hydrate state={pageProps.dehydratedState}>
          <ContextProvider>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </ContextProvider>
        </Hydrate>
        <ReactQueryDevtools />
      </QueryClientProvider>
    </ThemeProvider>
  )
}
export default MyApp

Any help will be appreciated

Answer 1

In case someone else struggling with this.
I managed to implement loading bar on route change via next-progress.
All I needed is to add <NextNProgress/> to return as below, and it worked like a charm.

 return (
    <ThemeProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <Hydrate state={pageProps.dehydratedState}>
          <ContextProvider>
            <Layout>
              <NextNProgress />
              <Component {...pageProps} />
            </Layout>
          </ContextProvider>
        </Hydrate>
        <ReactQueryDevtools />
      </QueryClientProvider>
    </ThemeProvider>
  )