gatsby: Unable to see the progress using "gatsby-plugin-nprogress"

@sachingvit Progress bar will be only visible in build. In develop we don’t need to fetch resources for other pages, so page changing will not be delayed and therefore progress bar will not show

Awesome plugin!

Can’t confirm if it’s working? How to test?

Install plugin, restart via ‘gatsby develop’, open in Chrome, right click inspect, devtools, Network tab, find ‘throttle’ section (might default to ‘online’) and change to slow 3G. Annnnd now you can see the plugin doing it’s magic!

This would be great info to add to https://www.gatsbyjs.org/packages/gatsby-plugin-nprogress/

I can’t seem to trigger it either, though I also have no problem triggering the one on gatsby.org

The plugin isn’t intended as something you can manually trigger. If you want to manually trigger nprogress, you can import nprogress directly and run it from your own code.

And like @ryanditjia mentioned, you’ll only see it if the page load is > 1 second — you can simulate that by loading you site and then reducing the network speed in the devtools.

I see 2 possibilities:

• Your connection is too fast. In Gatsby, the progress bar is hardcoded to only appear after 1s of delayed load. See: https://github.com/gatsbyjs/gatsby/issues/3368
• I don’t know your complete gatsby-config.js. But it’s possible that you’ve made a syntactical error. It should be something like:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-nprogress',
      options: {
        showSpinner: false,
        trickle: false,
        minimum: 0.4,
      },
    },
    'your',
    'other',
    'plugins',
    'here',
  ]
}

For anyone who can’t see the plugin, I had the same issue. To resolve it, you’ll also need to install the the original plugin:

npm i gatsby-plugin-nprogress nprogress

once you’ve done that you can import the plugin’s css file

import "nprogress/nprogress.css";

and either some customisation, or create your own css from scratch eg:

#nprogress {
  z-index: 10000;
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(48, 48, 48, 0.9);
  color: teal;
}

#nprogress .bar {
  background: teal;
}

#nprogress .spinner-icon {
  border-top-color: teal;
  border-left-color: teal;
}

Hope this helps.

Yip, me neither. At first I thought was my browser’s dark theme but I see the nprogress element doesn’t exist in the dom anywhere - just the css.

I got the same problem, and I can’t see it on gatsby.org neither.

I’ve also failed to trigger this plugin, with a production build and throttled connection, so I have no way to know if it’s working.

I just checked and it’s working (for me) on gatsbyjs.org - https://cl.ly/0d0o0x420z03

@thebarty Still I am unable to integrate the plugin, but I am able to see the progress bar on my page. You can refer my repo and there is one gatsby-browser.js so I put some small logic there to trigger.

But top off that I am still unable to achieve the behavior of this plugin.

@KyleAMathews I am unable to see loader on gatsby.org

Can you check if you can trigger the progress bar on gatsbyjs.org? We have the plugin installed there.

Any progress on this one? I am also NOT seeing any progress-indicator. Neither in production, nor locally via gastby build; gatsby serve (and then slowing things down in chrome developer tools).

Any idea what else to try?