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

[sachingvit]

Description

I am trying to integrate "gatsby-plugin-nprogress" into my application, I have done mentioned configuration in gatsby-config.js to add the plugin. But I am not sure how to use it, how can I see loaded on page load and how to operate from applicstion.

Can anyone help me to integrate it within my application?

Steps to reproduce

Expected result

What should happen?

Actual result

What happened.

Environment

• Gatsby version (npm list gatsby): [email protected]
• gatsby-cli version (gatsby --version): 1.1.49
• Node.js version: 8.9.3
• Operating System: Windows

File contents (if changed):

gatsby-config.js: {
resolve: gatsby-plugin-nprogress,
options: {
color: red,
showSpinner: true,

  }

package.json:
gatsby-node.js:
gatsby-browser.js:
gatsby-ssr.js:

[ryanditjia]

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',
  ]
}

[sachingvit]

@ryanditjia Thanks for your comment here is my Repo

Your first concern sounds because I am not having a lots of data to load, but if I want to trigger the nprogress manually how can I do it? I have found some code snippet on internet so I had added it into gatsby-browser.js

Please check and tell me where I am wrong. I am totally new to this.

[sachingvit]

@ryanditjia I had started the things but its not correct, I have to use this for page load time and API data fetch time also, but I want to have access on progress loader for some processes. How can I do that using single instance of "nprogress"

[KyleAMathews]

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.

[sachingvit]

@KyleAMathews @ryanditjia I had tried with mentioned way also reduced my connection speed to 1kbps but I am not able to see progress bar after removing manually call from gatsby-browser.js.

you can check my approach into Test repo

any hints what wrong there ?

[sachingvit]

[pieh]

@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

[sachingvit]

@pieh @ryanditjia @KyleAMathews I have done all mentioned in doc and suggested by you but this plugin is not working in my case. I had created the build and change the network speed to 10kbps. But unable to see the progress bar.
This time I had created a new Gatsby project and installed only "gatsby-plugin-nprogress"

Code Repo

[thebarty]

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?

[KyleAMathews]

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

[sachingvit]

@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

[pieh]

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

[trafnar]

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.

[hanzhihua1]

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

[MeFelixWang]

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

[stewest]

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.

[Ir1d]

cant see it either, checked my zindex

[eesa1980]

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.

[chrisk8er]

I tried all solution but have no luck... 🙄

[BenQuirk]

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/

[Rajesh-Royal]

You should make your #nprogress div at top of all events. Sometimes when your header is fixed it covers progress.

In my case I used this css:

#nprogress{
  position: fixed;
  z-index: 100000;
}

to debug open run your site build not develop and then set speed to 5kb/s. You shouldn't be using localhost. Once you start visiting pages open your inspect and at the very bottom of <body> tag you will see a new <div> with #nprogress Id.

Now you can debug and see what is the actual error.

you can see it on my gatsby portfolio https://developer-blog-ecommerce-gatsby.netlify.app/blog
It also on @Rajesh-Royal GitHub.