Add Jetpack connect screen loading screens and minor UI update

[chihsuan]

Related to #78267

Proposed Changes

• Vertically center profile logo according to some texts Y5pUYSJPsGEud1vknUZhi8-fi-1911_36557

• Implement loading screens in Jetpack connect Y5pUYSJPsGEud1vknUZhi8-fi-1911_36598

Screen.Recording.2023-06-27.at.14.28.28.mov

Testing Instructions

Logged-in users

1. Set up woocommerce-start-dev-env
2. Create a JN site and use the latest woocommerce nightly build
3. Go to Core Profiler flow
4. Install plugins and confirm you're redirected to Jetpack connection page
5. Observe that it centers the profile icon with the first 2 lines only (Y5pUYSJPsGEud1vknUZhi8-fi-1911%3A36569)
6. Click on Connect your account button
7. It should show the loading screens and redirect you back to WooCommerce Home

New users

1. Set up woocommerce-start-dev-env
2. Create a JN site and use the latest woocommerce nightly build
3. Go to /wp-admin/users.php
4. Create a new user with a new email that you will use to sign up later and assign the Administrator role to it
5. Open an incognito window
6. Go to your JN site and sign in with the user account you just created
7. Go to Core Profiler flow
8. Install plugins and confirm you're redirected to Jetpack connection signup page
9. Fill out the signup form
10. Click on Create an account button
11. It should show the loading screens and redirect you back to WooCommerce Home

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-6991f9298b616eed6686b2fe5503b02fc88ecbec

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-6991f9298b616eed6686b2fe5503b02fc88ecbec&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~13 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper       +131 B  (+0.0%)      +13 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~2226 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
jetpack-connect      +6678 B  (+0.6%)    +2226 B  (+0.7%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[moon0326]

Nice work! LGTM and tested well 👍 🚀

[rjchow]

I'm seeing this with a logged in user after rebasing to latest trunk:

Not really sure why the store card is missing?

[chihsuan]

I'm seeing this with a logged in user after rebasing to latest trunk:

Not really sure why the store card is missing?

@rjchow Could you please confirm the "jpVersion" in your URL parameters? I guess jpVersion param is missing.

@ilyasfoo also encountered that issue, but I was not able to reproduce it. See: #78615

[ilyasfoo]

Opening up a modal to show the loading is a creative solution, good thinking @chihsuan!

One thing however, I don't know if there are any instances where the connect would error, and now it might not be shown since modal is covering it. Is that a possibility we should consider?

Also, it seems no actual progress is being passed to WooLoader. I may not understand the loading process 100%, but should we use actual loading instead of timer and intervals?

Anyway, this PR is tested well. Everything else can be addressed as a follow-up if necessary! 🚢

Could you please confirm the "jpVersion" in your URL parameters? I guess jpVersion param is missing.

@chihsuan This time around I wasn't able to reproduce it. My URL has jp_version=12.2.1.

Edit: I was able to reproduce it again by deactivating Jetpack plugin before going through the core profiler. Probably not something we should address in this PR though.

[chihsuan]

Thanks for the review! @ilyasfoo

One thing however, I don't know if there are any instances where the connect would error, and now it might not be shown since modal is covering it. Is that a possibility we should consider?

Actually, error will be shown because we only render the modal when isAuthorizing or authorizeSuccess. 🙂

Also, it seems no actual progress is being passed to WooLoader. I may not understand the loading process 100%, but should we use actual loading instead of timer and intervals?

Yes, I agree with you! It's not the best approach for now. I think we should rethink the design of the component. We can work on that when creating a reusable component.

Edit: I was able to reproduce it again by deactivating Jetpack plugin before going through the core profiler. Probably not something we should address in this PR though.

Thanks, I was able to reproduce it this time. I think JP connect package doesn't set the jp_version value. However, I think we can skip that check for core profiler flow. Will work on that.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/8069144

Thank you @chihsuan for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.