Components: spinner line and progress bar are visually inconsistent

[davewhitley]

SpinnerLine component and animated ProgressBar are stylistically inconsistent.

SpinnerLine has an animated shiny glare effect, whereas ProgressBar has a barber shop, candy stripe effect.

We should update ProgressBar to adopt the SpinnerLine style, because I think it's more modern and more consistent with the .com style.

ProgressBar

[folletto]

The SpinnerLine should exclusively be used in a context where there's a loading block that hasn't been loaded yet (see its usage in the Editor, when it shows up in preparation of a featured image before it's loaded). It's designed to be similar to the skeleton loaders. For that reason, it should not be used as a general progress bar, or as a generic loader either. It's very specific. It's a placeholder for a component that is going to expand.

Also, funnily enough: the progress bar original design was faded, and we updated to striped because we considered it looked more aligned with Calypso patterns. See the discussion on #7258.

As it stands, I think they are both fitting for their context and use — and shouldn't converge.

[davewhitley]

I don't think they should look the same, but I think they should both use the same effect. They both are trying to achieve the same effect — a dark color moving across a lighter background "bar". They do that same thing in 2 different aesthetic styles, and that is not ideal when trying to have a consistent visual style. The barber style is off-putting to me, and looks a bit dated.

[folletto]

They both are trying to achieve the same effect

That's where I see it differently. One is an animation for a loading bar, the other is a placeholder that pulsates (as the other placeholder pulsate similarly).

The barber style is off-putting to me, and looks a bit dated.

I can understand this. The point I'm making is just that I wouldn't do it to make it "consistent", because I think they are very different in both context and use — specifically the SpinnerLine has to be consistent with the pulsating skeletons, because that's what it is.

I'm ok if we want to change the ProgressBar in any way. :)

[davewhitley]

That's where I see it differently. One is an animation for a loading bar, the other is a placeholder that pulsates (as the other placeholder pulsate similarly).

I see the SpinnerLine effect as very close to the ProgressBar. To me, SpinnerLine looks like a light color moving across the bar from left to right, not pulsating. Perhaps it should be more pulsating.

I see now this was discussed in #7258, but I think the ProgressBar should be pulsating, similar to the original image in that PR (except only apply the effect to the blue part).

To me, I see the 2 components as having similar contexts — each one is there to indicate that something is loading and the user must wait. But, even if they are completely different components I still think that they should fit in the "Calypso" style, just like all of our components.

[folletto]

I see the SpinnerLine effect as very close to the ProgressBar. To me, SpinnerLine looks like a light color moving across the bar from left to right, not pulsating. Perhaps it should be more pulsating.

In my initial test I did pulsating exactly like the existing skeletons, but wasn't visible enough. I'd be cool in iterating on that.

I think the ProgressBar should be pulsating, similar to the original image in that PR (except only apply the effect to the blue part).

Ok, granted then we are thinking from very different assumptions...

There are studies where the movement as done now conveys a better perception of time, which makes for a better user experience. So it's not just a "style" change. Are we sure we want to lose that? :)

[davewhitley]

In my initial test I did pulsating exactly like the existing skeletons, but wasn't visible enough. I'd be cool in iterating on that.

I saw your other iterations in that PR, and I would have liked to see more of that.

There are studies where the movement as done now conveys a better perception of time, which makes for a better user experience. So it's not just a "style" change. Are we sure we want to lose that? :)

I agree that left to right movement is better for time perception. It doesn't have to only pulse but I do think that would align it more with the other visual in calypso.

[davewhitley]

I saw a really nice "pulsating" progress bar on iTunes. I really like the style, since it's visually consistent with the spinner line.

On the other hand, I also saw that Slack uses a barber style bar and I didn't mind it. Perhaps that's because they have a more cute aesthetic?

[stale[bot]]

This issue has been marked as stale because it hasn't been updated in a while. It will be closed in a week. If you would like it to remain open, can you please you comment below and see what you can do to get things moving with this issue? Thanks! 🙏