Wp-calypso: Ecommerce Plan: Processing screen design needs revamp

[sixhours]

After checking out with the eCommerce Plan, you get this processing screen, which doesn't look very inspiring given the $$$ the customer has just paid.

Originally reported by @ianstewart . The whole video of signup process can be found in this post (under eCommerce plan customers): paObgF-7Y-p2

[jeffikus]

We already removed the masterbar for pages like Checkout and Thank You, should we not remove it for this page too?

[sixhours]

Yes, I think we should @jeffikus

[scalarbane2]

I tried replicating this but it seems it has been fixed. After checking out, the next screen that appears is "Thank you screen" which looks okay to me.

[lcollette]

I went through the flow and was able to replicate the issue. The 'Processing' screen appears for about 7-8 seconds before the 'Thank you' screen appears. Here's a video:

https://cl.ly/66fa05e50330

[scalarbane2]

Alright. I didn't see it while I was doing that. I'll look into it now.

[scalarbane2]

This is what I came up with, using a pulsing progress bar to show activity and process on the page. I think it's a good way to represent the screen.

[sixhours]

@scalarbane2 Thanks for taking a first pass at this! I think we should use a similar processing screen to the one we currently use for onboarding, for consistency. You can see it as you finish up the setup process at https://wordpress.com/start (there are floating icons, and the WordPress logo). Have a look and let us know what you think.

[scalarbane2]

Following the similar processing screen.

[sixhours]

I started working on this and realized that our checkout flow uses different colors from signup, so I'm swapping out the dark blue background for checkout's gray background and using darker colors for the foreground text and elements.

Testing this one is tricky, though, because I can't seem to get it to pause on the loading screen long enough to debug the styles and animations effectively. Will keep plugging away at it.