I have noticed that in some situations the progress bar gets fired unnecessarily, or slowly trickles away without getting stopped.

This happens a lot in Firefox, and sometimes in Chrome (a lot in dev, sometimes in production).

Here are two examples of when I see it happen.
(With Chrome in dev sometimes, and almost always with Firefox in production)

• when clicking on a <Link> to another page within the next app. The progress bar fires, but it doesn't finish when the page loads. It just slowly keeps trickling and gets stuck near the end.

• when changing to a different page using Router.replace('/new-page.js'), the progress bar keeps trickling and doesn't stop when the new page is loaded.

• sometimes I need to make a POST html request to an api (database backend), without changing pages. But when the POST requests goes, the progress bar starts loading. Then it just trickles away and gets stuck at almost full.

Then it stays stuck there, even if I change pages. I need to refresh to get it back to normal.

How can we prevent the progress bar from firing in situations like this? Has this addon been tested extensively with Firefox?

edit: I imagine this is a problem with next/router, it shouldn't be firing onRouteChangeStart on POST requests that don't change the page, and it seems to not be firing onRouteChangeComplete in a lot of situations (especially with Firefox).

I have taken some time to research this one.
It looks like the release for fixing #4 also improved the way nprogress can be attached,which is just by using the hoc, no more need for adding the NProgress component, however configuring NProgress has been obfuscated.

It is no longer possible to overwrite the default Props of NProgress which remain the default:

color: "#2299DD",
showAfterMs: 300,
spinner: true

also the property delayMs is misconfigured as it should be showAfterMs.

Hey @sergiodxa - once I upgraded to 1.3.0 my app fails to run with this error:

Uncaught TypeError: Cannot read property 'onRouteChangeStart' of undefined
    at b.i (component.js:formatted:1)
    at commitLifeCycles (react-dom.development.js:15255)
    at commitAllLifeCycles (react-dom.development.js:16523)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:16677)
    at completeRoot (react-dom.development.js:18069)
    at performWorkOnRoot (react-dom.development.js:17997)
    at performWork (react-dom.development.js:17901)
    at performSyncWork (react-dom.development.js:17873)
    at requestWork (react-dom.development.js:17761)
    at scheduleWork (react-dom.development.js:17566)
    at scheduleRootUpdate (react-dom.development.js:18240)
    at updateContainerAtExpirationTime (react-dom.development.js:18267)
    at updateContainer (react-dom.development.js:18324)
    at ReactRoot.render (react-dom.development.js:18586)
    at eval (react-dom.development.js:18726)
    at unbatchedUpdates (react-dom.development.js:18124)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:18722)
    at Object.hydrate (react-dom.development.js:18780)
    at renderReactElement (index.js:334)
    at _callee5$ (index.js:397)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:288)
    at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3000/_next/static/runtime/main.js:16427:21)
    at asyncGeneratorStep (asyncToGenerator.js:5)
    at _next (asyncToGenerator.js:27)
    at asyncToGenerator.js:34
    at new Promise (<anonymous>)
    at new F (_export.js:36)
    at asyncToGenerator.js:23
    at _doRender (index.js:457)
    at doRender (index.js:343)
    at _callee2$ (index.js:233)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:288)
    at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3000/_next/static/runtime/main.js:16427:21)
    at asyncGeneratorStep (asyncToGenerator.js:5)
    at _next (asyncToGenerator.js:27)
    at asyncToGenerator.js:34
    at new Promise (<anonymous>)
    at new F (_export.js:36)
    at asyncToGenerator.js:23
    at _render (index.js:254)
    at render (index.js:205)
    at _callee$ (index.js:185)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:288)
    at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3000/_next/static/runtime/main.js:16427:21)

This is in combination with React 16.6.

Here is a branch with repo: https://github.com/brianlovin/brian-lovin-next/tree/react-and-fixes
clone, yarn, and yarn run dev should repro this error. It appears the error likely came from https://github.com/sergiodxa/next-nprogress/pull/27/files but it's hard to say.

Curious if you've seen this (I couldn't find anything too similar in past issues). In the meantime I'm going to try and fork + fix a local version of this package.

Hi~ 👋
Thank you for your wonderful library.

I'd like to use it in _app.tsx, but it throws an error says @types/next-nprogress is required or add *.d.ts containing declare module next-nprogress. I tried to yarn add @types/next-nprogress -D, but failed not found.

any solution?

Originally posted by @itsfadnis in #23 (comment)

Can you please publish? Thanks.

Since upgrading to nextjs 8 I'm getting an issue with styled-jsx

Trying to use the NProgress component but it breaks the app.

ReferenceError: Router is not defined

I see that you're using Router in component.js, but you're not importing it from next.

Thank you for making this extremely helpful package!

One thing that would be fantastic would be an ability to access the NProgress.configure, (see nprogress README here). For example, I would like to be able to configure:

NProgress.configure({ showSpinner: false }); 

Is there a clean and easy way to do this with this package?

edit: I see it's pretty simple to edit the settings in nprogress.js (just like you suggested editing nprogress.css in the docs), but it would be nice to be able to make changes to the settings by something like withNProgress({ showSpinner: false }) so that customizations could persist across package updates, reinstalls etc, deployments to servers that run npm install etc.

edit 2: On looking at the source I realized that you can configure the spinner by doing, so that solves my issue.

<NProgressStyles color="white" spinner={false} />

It still would be nice to be able to pass an object of nprogress config options, ie.

export default withNProgress({ trickleSpeed: 200, showSpinner: false })(MyApp)

The NPM version of this package is not updated with the new Component feature

Could you please tell how can I use this with your great next-ga package? Thanks in advance!

After following the installation steps i get the following error:

Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
at sanitize (C:\Users\mazino.ukah\ReactProjects\Treten\TretenFE\node_modules\styled-jsx\dist\stylesheet-registry.js:21:15)

` ERROR Failed to compile with 1 errors 09:15:12

This relative module was not found:

• ./dist/styles.js in ./node_modules/next-nprogress/styles.js`

Hey @sergiodxa!

Thanks for sharing this handy little package :)

I just have an improvement suggestion: I took the code of this package and turned the HOC into a plain React component. I think it's much friendlier to use this way, but you be the judge here:

interface Props {
  children: React.ReactNode,
  color?: string,
  showAfterMs?: number
  spinner?: boolean
}

class NProgressContainer extends React.Component<Props> {
  timer: NodeJS.Timer | null = null

  componentDidMount () {
    Router.onRouteChangeStart = () => {
      this.clearTimer()
      this.timer = setTimeout(NProgress.start, this.props.showAfterMs || 300)
    }

    Router.onRouteChangeComplete = () => {
      NProgress.done()
      this.clearTimer()
    }

    Router.onRouteChangeError = () => {
      NProgress.done()
      this.clearTimer()
    }
  }

  clearTimer () {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  }

  render () {
    const { color = '#29d', spinner = true } = this.props
    return (
      <>
        <NProgressStyles color={color} spinner={spinner} />
        {this.props.children}
      </>
    )
  }
}

Usage:

// In App component:
<NProgress color={theme.colors.main} spinner={false}>
  {pageContent}
</NProgress>

I know that it's a big breaking change for such a small package, but maybe you like it as much as I do 😉

Cheers!