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

Does this answer your question? [nextjs getServerSideProps show loading](https://stackoverflow.com/questions/60755316/nextjs-getserversideprops-show-loading) — juliomalves, Dec 14 '21 at 15:22
Smaller alternative to NProgress: https://gist.github.com/tkrotoff/db8a8106cc93ae797ea968d78ea28047 — tanguy_k, Feb 05 '23 at 22:17

score 0 · Answer 1 · edited Feb 05 '23 at 22:16

0

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>
  )

edited Feb 05 '23 at 22:16

tanguy_k

11,307
6
54
58

answered Dec 14 '21 at 23:22

FD3

1,462
6
24
47

hi @Greg did the simple setup on next-progress work for you out of the box? My progress bar is still not working. I am wondering if there is a configuration setup I am missing. – Ben Nov 24 '22 at 12:30
@Ben I didn't try it anymore. since the next-progress package worked fine for me – FD3 Nov 24 '22 at 12:59
1

Thanks. My route changes are not even logging to the console. Let me continue investigating. – Ben Nov 24 '22 at 13:02

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

1 Answers1