NProgress example on 2-begin may be faulty

[marcosCapistrano]

I may be wrong but when NProgress get's rendered it:

-Hardly shows (css may be missing) -Spinner does not show even though it's defaulted to be shown (doesn't show even if explicitly set to true)

Would also be nice to offer explanations on how to style it considering SSR, since it's a third-party library. I ask that because my theory is that maybe it's not rendering correctly because it's styles are not being injected?

EDIT: For someone willing to test, just run 2-end and notice how NProgress is rendered (notice the lack of the spinner)

[klyburke]

@marcosCapistrano Thanks for reporting. I will look into this later today.

[klyburke]

Hi @marcosCapistrano . I ran 2-end, and you are right that the NProgress bar is hard to see. That is because 2-end has the light theme enabled, and we were using an NProgress bar with a white background. The style for that NProgress bar is here: https://storage.googleapis.com/async-await/nprogress-light.min.css?v=1

In Chapter 2 (and subsequent chapters), we meant to use an NProgress bar with a dark gray background: https://storage.googleapis.com/async-await/nprogress-dark.min.css?v=1.

The two background color options are introduced in Chapter 8, when we change the bar color based on a user's choice of light or dark theme.

I switched to the dark NProgress bar for Chapters 2-7. Thanks again for reporting!

---

Note that the design is a thin bar at the top of the screen, not a "spinner". Check out this web page that demonstrates how the bar works. Click the play button for NProgress.start() and then for NProgress.done().

https://ricostacruz.com/nprogress/

[marcosCapistrano]

Oh i see! Im still early in the book so I was afraid that would be fixed on later chapters... So in chapter 8 we learn how to style it, that's awesome. Also I mentioned the "spinner" because in https://ricostacruz.com/nprogress/ there is a spinner along with the progress bar on the top-right side. I tried enabling it on 2-begin and couldn't make it show up. That made me think the styles weren't being injected. But anyways, I will keep following on with the book. Thanks for the reply!

EDIT: Now that I think about it, maybe it's showing a light color spinner on a light background, so that's why it isn't showing

[klyburke]

@marcosCapistrano You're welcome!

Oh, I see what you mean by the spinner on https://ricostacruz.com/nprogress/. The NProgress bar in the book is only the thin bar at the top of the screen. No spinner.

If you pull the code that I pushed yesterday and then run 2-end, you will see that the bar is now dark gray and much more visible.

[tima101]

@marcosCapistrano I looked into docs and 0.2.0 does have spinner by default:

https://github.com/rstacruz/nprogress#showspinner

That means we probably don't see it due to styling. If you figure out how to style spinner, please let me know. I will push fix sometime in November: https://github.com/async-labs/saas/issues/163

[marcosCapistrano]

Tested using the stylesheet used on their main website: https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.css and it worked! Turns out there's some missing styles on the dark/light version

Dark Version: https://storage.googleapis.com/async-await/nprogress-dark.min.css?v=1 Version with spinner: https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.css

[klyburke]

Thanks @marcosCapistrano ! I'll test this out later.

[klyburke]

@marcosCapistrano Thanks again. I tried your version with spinner. Looks good! As @tima101 noted, we will push this in our November update: https://github.com/async-labs/saas/issues/163

[marcosCapistrano]

Awesome! Loving the book so far guys, great work!

[tima101]

Solved in #163