Janky transition to the loader on WooCommerce connection screen

[adrianduffell]

Issue Description

When connecting a store, the transition to the loader appears janky. This looks to be caused by a delay to show the first image, making the text re-position suddenly.

I have attached normal speed and slow motion video capture below:

Normal speed video

Janky.transition.mp4

Slow motion video

Janky.slo.mo.mp4

Steps to reproduce

1. After installing WooCommerce, select Jetpack in the core profiler and proceed to the connection screen
2. Select an account and click "Connect to WordPress.com"
3. Observe jankiness in the transition

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Customer Seller Experience: The issue pertains to the user experience during the WooCommerce connection process.
• [Feature] Jetpack Connection Errors: The issue is directly related to connecting a WooCommerce store to Jetpack, where visual transitions might affect usability.
• [Feature] Site Performance: The problem with the janky transition indicates a concern with performance that can impact user experience.
• [Feature] Woo Express: The context of the issue is around utilizing WooCommerce within WordPress.com, which falls under Woo Express features.

[moon0326]

Fixed it with Preload setup page on the authorize page #96558