title: How to show a loading bar when changing routes in NextJS?
body: <p>I am trying to add loading indicator while routes are changing and have some issues with that. <br>
  I did, as it is described <a href="https://github.com/vercel/next.js/blob/canary/examples/with-loading/pages/_app.js" rel="nofollow noreferrer">in <strong>next.js</strong>  docs</a>, also tried like in <a href="https://dev.to/debosthefirst/how-to-show-a-loading-bar-when-changing-routes-in-nextjs-304e" rel="nofollow noreferrer">this article</a>, but somehow loading bar doesn't show up, even though in console I can see the loading and loaded route. <br></p>
  <p>_app.tsx</p>
  <pre><code>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(() =&gt; new QueryClient())
  
    const router = useRouter()
  
    useEffect(() =&gt; {
      const handleStart = (url: string) =&gt; {
        console.log(`Loading: ${url}`)
        NProgress.start()
      }
      const handleStop = (url: string) =&gt; {
        console.log(`done: ${url}`)
  
        NProgress.done()
      }
  
      router.events.on('routeChangeStart', handleStart)
      router.events.on('routeChangeComplete', handleStop)
      router.events.on('routeChangeError', handleStop)
  
      return () =&gt; {
        router.events.off('routeChangeStart', handleStart)
        router.events.off('routeChangeComplete', handleStop)
        router.events.off('routeChangeError', handleStop)
      }
    }, [router])
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;QueryClientProvider client={queryClient}&gt;
          &lt;Hydrate state={pageProps.dehydratedState}&gt;
            &lt;ContextProvider&gt;
              &lt;Layout&gt;
                &lt;Component {...pageProps} /&gt;
              &lt;/Layout&gt;
            &lt;/ContextProvider&gt;
          &lt;/Hydrate&gt;
          &lt;ReactQueryDevtools /&gt;
        &lt;/QueryClientProvider&gt;
      &lt;/ThemeProvider&gt;
    )
  }
  export default MyApp
  </code></pre>
  <p>Any help will be appreciated</p>