Stepper: Unify loading states

[escapemanuele]

Conversation: p1738260526318899/1738058408.252399-slack-C07H21B2W59

Proposed Changes

Replace the pulsating WordPress logo with a ProgressBar during the Onboarding.

loading.mp4

Testing Instructions

• Live Link
• Go through /setup/onboarding

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131644&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug stepper-loading-progress on your sandbox.

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-stepper             +13602 B  (+1.0%)    +5980 B  (+1.6%)
entry-main                 -4465 B  (-0.2%)     +200 B  (+0.0%)
entry-subscriptions         -546 B  (-0.0%)     -132 B  (-0.0%)
entry-browsehappy           -361 B  (-0.2%)     -125 B  (-0.2%)
entry-domains-landing       -309 B  (-0.0%)     -103 B  (-0.0%)
entry-login                 -238 B  (-0.0%)     +167 B  (+0.0%)

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

Sections (~176255 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
copy-site-flow                         -17981 B  (-1.7%)    -6510 B  (-2.0%)
transferring-hosted-site-flow          -17711 B  (-6.7%)    -6407 B  (-7.3%)
import-hosted-site-flow                -17340 B  (-1.4%)    -6781 B  (-1.8%)
write-flow                             -17316 B  (-1.4%)    -6872 B  (-1.9%)
build-flow                             -17316 B  (-1.4%)    -6840 B  (-1.9%)
plugin-bundle-flow                     -17118 B  (-3.3%)    -5613 B  (-3.5%)
link-in-bio-tld-flow                   -16621 B  (-0.7%)    -6983 B  (-1.0%)
entrepreneur-flow                      -14315 B  (-7.1%)    -5152 B  (-7.8%)
update-design-flow                     -11352 B  (-0.7%)    -6034 B  (-1.3%)
newsletter-post-setup-flow             -10507 B  (-3.8%)    -4205 B  (-4.6%)
link-in-bio-post-setup-flow            -10507 B  (-3.8%)    -4205 B  (-4.6%)
stepper-user-step                       -6794 B  (-2.6%)    -2827 B  (-3.4%)
domain-user-transfer-flow               -6678 B  (-1.8%)    -2710 B  (-2.9%)
signup                                   +841 B  (+0.3%)      +56 B  (+0.1%)
a8c-for-agencies-migrations              +705 B  (+0.1%)      -49 B  (-0.0%)
security                                 +679 B  (+0.1%)     +835 B  (+0.4%)
design-first-flow                        -675 B  (-2.4%)     -107 B  (-1.8%)
a8c-for-agencies-overview                +626 B  (+0.1%)    -1332 B  (-0.5%)
start-writing-flow                       -618 B  (-2.2%)     -117 B  (-2.1%)
a8c-for-agencies-team                    +612 B  (+0.1%)    -2242 B  (-0.8%)
hundred-year-plan                        -567 B  (-0.3%)      -75 B  (-0.1%)
devdocs                                  -540 B  (-0.3%)      -84 B  (-0.1%)
a8c-for-agencies-referrals               +475 B  (+0.0%)    -2353 B  (-0.8%)
a8c-for-agencies-marketplace             +461 B  (+0.0%)     +868 B  (+0.3%)
newsletter-flow                          -408 B  (-1.8%)      -74 B  (-1.4%)
checkout                                 +407 B  (+0.0%)    +1032 B  (+0.2%)
a8c-for-agencies-client                  +366 B  (+0.0%)    -1290 B  (-0.4%)
site-tools                               -339 B  (-0.0%)    -2478 B  (-0.5%)
site-blocks                              +333 B  (+0.1%)    +1142 B  (+0.7%)
notification-settings                    +333 B  (+0.0%)    +1773 B  (+0.9%)
help                                     +333 B  (+0.1%)    +1239 B  (+0.7%)
a8c-for-agencies-sites                   +294 B  (+0.0%)    -2413 B  (-0.4%)
jetpack-cloud-partner-portal             +261 B  (+0.0%)     +207 B  (+0.1%)
site-setup-wg                            +245 B  (+0.1%)      +36 B  (+0.0%)
site-setup-flow                          +245 B  (+0.1%)      +36 B  (+0.0%)
a8c-for-agencies-purchases               +231 B  (+0.0%)     +708 B  (+0.3%)
privacy                                  +230 B  (+0.0%)    +1584 B  (+0.9%)
me                                       +230 B  (+0.0%)    +1149 B  (+0.7%)
jetpack-connect                          +230 B  (+0.0%)     +824 B  (+0.2%)
jetpack-cloud-pricing                    +230 B  (+0.0%)     +878 B  (+0.4%)
jetpack-cloud-features-comparison        +230 B  (+0.0%)     +870 B  (+0.4%)
developer                                +230 B  (+0.0%)    +1547 B  (+0.9%)
site-settings                            -208 B  (-0.0%)    -1417 B  (-0.3%)
site-marketing                           -208 B  (-0.0%)    -1360 B  (-0.3%)
hosting                                  -195 B  (-0.0%)    -1295 B  (-0.2%)
reblogging-flow                          -192 B  (-2.6%)      -62 B  (-3.1%)
purchases                                +189 B  (+0.0%)     +109 B  (+0.0%)
jetpack-cloud-plugin-management          -188 B  (-0.0%)    -2020 B  (-0.3%)
a8c-for-agencies-plugins                 -188 B  (-0.0%)    -2049 B  (-0.3%)
themes                                   -176 B  (-0.0%)      +11 B  (+0.0%)
stats                                    -173 B  (-0.0%)     +440 B  (+0.1%)
a8c-for-agencies-landing                 -172 B  (-0.1%)      -35 B  (-0.1%)
jetpack-cloud-agency-dashboard           +149 B  (+0.0%)    -1226 B  (-0.4%)
a8c-for-agencies                         +137 B  (+0.1%)      +34 B  (+0.1%)
new-hosted-site-flow                     -135 B  (-0.1%)      -49 B  (-0.1%)
hundred-year-domain-transfer             -135 B  (-2.0%)      -14 B  (-0.8%)
hundred-year-domain                      -135 B  (-0.1%)      -34 B  (-0.1%)
google-transfer                          -135 B  (-2.4%)      -15 B  (-0.9%)
domain-transfer                          -135 B  (-2.5%)      -20 B  (-1.3%)
sites-dashboard                          -132 B  (-0.0%)    -1405 B  (-0.4%)
site-performance                         -132 B  (-0.0%)    -1401 B  (-0.3%)
site-overview                            -132 B  (-0.0%)    -1393 B  (-0.3%)
github-deployments                       -132 B  (-0.0%)    -1436 B  (-0.4%)
jetpack-cloud-agency-signup              +128 B  (+0.2%)      +38 B  (+0.1%)
plugins                                  -123 B  (-0.0%)    -2004 B  (-0.2%)
site-monitoring                          -106 B  (-0.0%)    -1428 B  (-0.4%)
site-logs                                -106 B  (-0.0%)    -1412 B  (-0.4%)
hosting-features                         -106 B  (-0.0%)    -1399 B  (-0.4%)
readymade-template-flow                  +103 B  (+0.1%)      +11 B  (+0.0%)
earn                                     -103 B  (-0.0%)     -186 B  (-0.1%)
assembler-first-flow                     +103 B  (+0.1%)      +11 B  (+0.0%)
a8c-for-agencies-partner-directory       +103 B  (+0.0%)    +1231 B  (+0.7%)
new-hosted-site-flow-user-included        -84 B  (-0.0%)      -10 B  (-0.0%)
connect-domain                            -84 B  (-0.0%)       -8 B  (-0.0%)
theme                                     -74 B  (-0.0%)      +13 B  (+0.0%)
preview                                   -74 B  (-0.0%)      +28 B  (+0.0%)
pages                                     -74 B  (-0.0%)      +70 B  (+0.0%)
a8c-for-agencies-settings                 -69 B  (-0.0%)      -57 B  (-0.1%)
a8c-for-agencies-agency-tier              -69 B  (-0.0%)      -66 B  (-0.1%)
settings-security                         -68 B  (-0.0%)      +43 B  (+0.0%)
settings-podcast                          -68 B  (-0.0%)      +45 B  (+0.0%)
settings-performance                      -68 B  (-0.0%)      +34 B  (+0.0%)
settings                                  -68 B  (-0.0%)      +44 B  (+0.0%)
marketing                                 -68 B  (-0.0%)     +112 B  (+0.0%)
activity                                  -68 B  (-0.0%)      +42 B  (+0.0%)
reader                                    +57 B  (+0.0%)     -691 B  (-0.2%)
staging-site                              -54 B  (-0.0%)    -2751 B  (-0.6%)
domains                                   -52 B  (-0.0%)     -716 B  (-0.1%)
a8c-for-agencies-signup                   -51 B  (-0.0%)      -37 B  (-0.1%)
subscribers                               +46 B  (+0.0%)     -261 B  (-0.1%)
woocommerce-installation                  +34 B  (+0.0%)      +61 B  (+0.1%)
woocommerce                               +34 B  (+0.0%)      +61 B  (+0.1%)
switch-site                               +34 B  (+0.0%)      +23 B  (+0.0%)
settings-writing                          +34 B  (+0.0%)      +61 B  (+0.0%)
settings-reading                          +34 B  (+0.0%)      +61 B  (+0.0%)
settings-newsletter                       +34 B  (+0.0%)      +61 B  (+0.0%)
settings-jetpack                          +34 B  (+0.0%)      +61 B  (+0.0%)
settings-discussion                       +34 B  (+0.0%)      +61 B  (+0.1%)
scan                                      +34 B  (+0.0%)     +143 B  (+0.1%)
promote-post-i2                           +34 B  (+0.0%)      +61 B  (+0.0%)
plans                                     +34 B  (+0.0%)      +85 B  (+0.0%)
performance-profiler                      +34 B  (+0.0%)      +21 B  (+0.0%)
patterns                                  +34 B  (+0.0%)      +23 B  (+0.0%)
migrate                                   +34 B  (+0.0%)      +61 B  (+0.1%)
media                                     +34 B  (+0.0%)      +77 B  (+0.0%)
marketplace                               +34 B  (+0.0%)      +85 B  (+0.1%)
jetpack-social                            +34 B  (+0.0%)     +189 B  (+0.1%)
jetpack-search                            +34 B  (+0.0%)     +107 B  (+0.1%)
jetpack-cloud-settings                    +34 B  (+0.0%)      +61 B  (+0.0%)
jetpack-cloud-overview                    +34 B  (+0.0%)     +124 B  (+0.1%)
jetpack-cloud                             +34 B  (+0.0%)      +61 B  (+0.0%)
jetpack-app                               +34 B  (+0.0%)      +14 B  (+0.0%)
gutenberg-editor                          +34 B  (+0.0%)      +62 B  (+0.0%)
google-my-business                        +34 B  (+0.0%)      +61 B  (+0.0%)
export                                    +34 B  (+0.0%)      +61 B  (+0.1%)
email                                     +34 B  (+0.0%)     +539 B  (+0.2%)
customize                                 +34 B  (+0.0%)      +61 B  (+0.1%)
concierge                                 +34 B  (+0.0%)      +61 B  (+0.0%)
comments                                  +34 B  (+0.0%)      +61 B  (+0.0%)
backup                                    +34 B  (+0.0%)     +146 B  (+0.0%)
add-ons                                   +34 B  (+0.0%)      +61 B  (+0.1%)
account-close                             +34 B  (+0.0%)    +1005 B  (+0.6%)
accept-invite                             +34 B  (+0.0%)       +3 B  (+0.0%)
import                                    -32 B  (-0.0%)     +841 B  (+0.4%)
home                                      -26 B  (-0.0%)     -553 B  (-0.1%)
account                                   +22 B  (+0.0%)    +1342 B  (+0.6%)
posts-custom                              +20 B  (+0.0%)     +904 B  (+0.4%)
posts                                     +20 B  (+0.0%)     +904 B  (+0.4%)

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 (~8555 bytes removed 📉 [gzipped])

name                                                                              parsed_size            gzip_size
async-load-automattic-help-center-stepper                                            -14248 B   (-1.5%)    -5093 B   (-1.7%)
async-load-calypso-my-sites-checkout-modal                                            -9412 B   (-0.6%)    -3385 B   (-0.7%)
async-load-automattic-search                                                          -7403 B  (-22.3%)    -2328 B  (-20.3%)
async-load-calypso-components-global-notices                                          -2244 B  (-20.5%)     -862 B  (-23.3%)
async-load-site-build-showcase                                                        -2231 B  (-48.0%)     -906 B  (-45.3%)
async-load-signup-steps-domains                                                        +406 B   (+0.1%)     +482 B   (+0.2%)
async-load-signup-steps-initial-intent                                                 +230 B   (+0.2%)     +312 B   (+0.9%)
async-load-design-blocks                                                               -209 B   (-0.0%)     -626 B   (-0.1%)
async-load-signup-steps-design-picker                                                  +108 B   (+0.1%)      +27 B   (+0.1%)
async-load-calypso-my-sites-stats-stats-post-detail                                    -108 B   (-0.3%)      -39 B   (-0.4%)
async-load-calypso-my-sites-site-settings-seo-settings-form                            -108 B   (-0.0%)      -40 B   (-0.1%)
async-load-design-wordpress-components-gallery                                         -107 B   (-0.0%)      +32 B   (+0.0%)
async-load-automattic-help-center                                                      -107 B   (-0.0%)     +121 B   (+0.1%)
async-load-signup-steps-website-content                                                -103 B   (-0.0%)      -37 B   (-0.1%)
async-load-calypso-reader-sidebar                                                      -102 B   (-0.1%)      -19 B   (-0.1%)
async-load-calypso-my-sites-current-site-notice                                        -102 B   (-0.2%)      -17 B   (-0.1%)
async-load-calypso-components-web-preview-component                                    -102 B   (-0.0%)     +165 B   (+0.1%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                                -102 B   (-0.2%)      -17 B   (-0.1%)
async-load-calypso-blocks-jitm-templates-notice                                        -102 B   (-0.2%)      -18 B   (-0.1%)
async-load-calypso-blocks-jitm-templates-default                                       -102 B   (-0.2%)      -19 B   (-0.1%)
async-load-design-playground                                                            +84 B   (+0.0%)     -271 B   (-0.1%)
async-load-design                                                                       +84 B   (+0.0%)     -187 B   (-0.0%)
async-load-signup-steps-site-picker                                                     +59 B   (+0.0%)      +34 B   (+0.0%)
async-load-signup-steps-difm-site-picker                                                +59 B   (+0.0%)      +34 B   (+0.0%)
async-load-signup-steps-page-picker                                                     -51 B   (-0.0%)      -68 B   (-0.1%)
async-load-purchase-modal-wrapper                                                       -51 B   (-0.0%)      -67 B   (-0.1%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        -51 B   (-0.0%)      -67 B   (-0.1%)
async-load-signup-steps-woocommerce-install-step-business-info                          +34 B   (+0.0%)      +19 B   (+0.0%)
async-load-signup-steps-user                                                            +34 B   (+0.0%)       +1 B   (+0.0%)
async-load-signup-steps-theme-selection                                                 +34 B   (+0.0%)      +36 B   (+0.0%)
async-load-signup-steps-plans-theme-preselected                                         +34 B   (+0.0%)      -40 B   (-0.0%)
async-load-signup-steps-plans                                                           +34 B   (+0.0%)      -30 B   (-0.0%)
async-load-quick-language-switcher                                                      +34 B   (+0.0%)      +26 B   (+0.1%)
async-load-calypso-lib-account-settings-helper                                          +34 B   (+0.0%)      +24 B   (+0.0%)
async-load-calypso-layout-command-palette                                               +34 B   (+0.0%)      +23 B   (+0.0%)
async-load-calypso-blocks-jitm-templates-modal                                          +34 B   (+0.1%)      +16 B   (+0.1%)
async-load-automattic-whats-new                                                         +34 B   (+0.1%)      +20 B   (+0.2%)
async-load-calypso-blocks-editor-checkout-modal                                         +13 B   (+0.0%)      -43 B   (-0.0%)

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.