Wp-calypso: Checkout: Placeholder -> Loaded view transition is a little jarring

[spen]

Issue

On hitting the checkout page a placeholder view is shown while data is fetching.
Pretty standard :)
The problem is that the transition between the two view states is a little off...

As you can see, the placeholder hides before the checkout view is shown.
In my opinion, the placeholder should be instantly replaced with the loaded view.

The view order:

• Placeholder ->
• Nothing ->
• Loaded

Further, when landing at a checkout page as the first view, this is exacerbated - presumably because there are more state changes.

The view order looks like:

• Placeholder ->
• Nothing ->
• Placeholder ->
• Nothing ->
• Loaded

Reproduce

• Go to: http://calypso.localhost:3000/plans/your.wordpress.com
• Choose an upgrade (taking you to checkout)
• See the transition
  Then click
  __or__
• Go to: http://calypso.localhost:3000/checkout/your.wordpress.com/personal
• See the transition

I'm happy to dig in to this, I've been doing some similar work on my personal site recently and have some good ideas about why this is happening :)
This possibly needs design eyes on it just to confirm wether this is actually intended or not.

Thanks!

[lancewillett]

I can reproduce this. I doubt the flash of the loading placeholder is intentional... I agree the placeholder should be instantly replaced with no transition.

[ramonjd]

I noticed the placeholder wasn't being shown at all #19593.

But it no longer has the scale effect, and _kinda_ yields immediately to the form. Is this issue still valid?

[gwwar]

We'll want to verify if this is still an issue

[spen]

Nice! I can confirm that this bug has already squished itself! 👢🐞