BBE: Experiment for BBE goal copy

[ddc22]

Proposed Changes

• Adds a loading animation for when the experiment is loading
• Adds a different goals text for DIFM when the experiment treatment is active
• We also preload the experiment when site is created to try and eliminate the loader in most cases.
• The loader would be hidden for non EN users (when the BBE goal does not exist for display)

Testing Instructions

• Create a site

• Land on the post site creation goal step and make sure the normal UI is visible

• Go to the experiment 20855-explat-experiment and activate the treatment cookie

• Now refresh the goal step from above and make sure the treatment is visible

• Loader Dynamics

• When creating the site make sure that a loader is not visible when the experiment loads.

• Refresh the page after 1 minute (TTL) and make sure a loader is visible

• Change language to NON En and make sure the loader is never visible.

Pre-merge Checklist

• 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)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-46662

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-46662&env=jetpack

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-stepper              +8469 B  (+0.2%)    +2986 B  (+0.3%)
entry-main                   +97 B  (+0.0%)      +31 B  (+0.0%)
entry-login                  +43 B  (+0.0%)      +22 B  (+0.0%)
entry-gutenboarding          +43 B  (+0.0%)      +22 B  (+0.0%)
entry-domains-landing        +43 B  (+0.0%)      +22 B  (+0.0%)
entry-browsehappy            +43 B  (+0.0%)      +22 B  (+0.1%)

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

Sections (~3243 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
signup                     +8436 B  (+2.1%)    +3184 B  (+3.7%)
accept-invite              +8436 B  (+1.8%)    +3184 B  (+3.1%)
jetpack-connect            +1200 B  (+0.1%)     +469 B  (+0.2%)
plans                        +31 B  (+0.0%)      +16 B  (+0.0%)
pages                        +31 B  (+0.0%)      +20 B  (+0.0%)
jetpack-cloud-pricing        +31 B  (+0.0%)      +16 B  (+0.0%)
checkout                     +31 B  (+0.0%)      +16 B  (+0.0%)
plugins                      +18 B  (+0.0%)      +23 B  (+0.0%)

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

Async-loaded Components (~2383 bytes removed 📉 [gzipped])

name                           parsed_size           gzip_size
async-load-signup-steps-plans      -7143 B  (-2.1%)    -2383 B  (-2.4%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

[aneeshd16]

Tests well! Confirmed that the experiment assignment is pre-fetched while site creation. However, the TTL needs to be increased for this to work. Users who choose a paid plan are taken to the checkout screen after the site is created. The user most probably spends more than 60s on the checkout screen.

Left some minor feedback below.

[aneeshd16]

We hide the DIFM goal for non-EN locales. Can we add a check so that the placeholder is shown iff goalOptions contains the DIFM goal?

[ddc22]

Nice suggestion!

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.