question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

nprogress always show bar

See original GitHub issue

I know that it isn’t generally needed to show the progress bar all the time. However, small mobile phones the size of the screen can be small enough that header content covers a relatively large portion of the screen.

While a keen observer may be able to notice a small portion of screen changing, it can be difficult, especially when pages update as quickly as they do when using Gatsby. The problem is expounded by not having any indicator from the browser showing that the action has been completed either.

For my use case I had a small bio at the top of the page on mobile. Without scrolling down you could click on a blog topic and be sent to the full version of the article. But the article also had the small bio at the top of the page and the same excerpt at the top so besides some spacing differences it was hard even for me to notice the difference. I solved my use case by moving the bio to the bottom because it isn’t extremely useful, especially on mobile. But I think the progress bar could be useful for clarity purposes.

Regardless, the Gatsby docs specify “you may pass all available nprogress configuration options.” to nprogress plugin. In Gatsby’s case it isn’t 100% accurate because passing the minimum configuration option doesn’t change anything in Gatsby’s case.

TL;DR consider implementing support for the minimum configuration option for nprogress instead of the set 1s delayed loading.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Sorgrumcommented, Jan 12, 2018

Great idea @fk, even got a response from @KyleAMathews himself. Closing in favor of #3368

0reactions
fkcommented, Jan 10, 2018

👋 @Sorgrum Should we close this in favor of #3368 [gatsby-plugin-nprogress]: change default show delay which is a little more recent/active?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Progress Bar using nprogress.Js - Stack Overflow
Taken from http://ricostacruz.com/nprogress/. NProgress.set(0.4) — sets a percentage. If you want to go to the middle, set 0.5 o 50 or ...
Read more >
Use NProgress with Next.js (Router and fetch events)
This article explains how to use NProgress to show a top progress bar whenever a fetch or Router event is ongoing in Next.js...
Read more >
rstacruz/nprogress - Gitter
Hi all. nprogress always fails for me with ES6 module loading. ... and I am expecting a progress bar to appear with 30...
Read more >
NProgress: slim progress bars in JavaScript - Rico Sta. Cruz
A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening! NProgress.start() — shows the progress ...
Read more >
NProgress: slim, site-wide progress bars - Hacker News
The most important function of a progress bar is Time Travel. ... I always knew there must be some solid UX reasoning behind...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found