Stepper: Add fallback header and loading by renancarvalho · Pull Request #101840 · Automattic/wp-calypso

renancarvalho · 2025-03-25T13:50:33Z

Context thread p1741878991651569-slack-C02T4NVL4JJ

Proposed Changes

Use the same loading style with loading bar, title and header logo on pages that are not part of the stepper.

Before: Loading without logo on top left and title

After: Loading with title and Logo

Why are these changes being made?

In stepper, sometimes we have to navigate outside the flow and then navigate back, for instance, to the checkout page. This navigation causes some visual issues since it requires a page refresh when leaving and when redirected back to stepper. Currently, there are some fallbacks in place to prevent blank screen to users while loading content, they are:

When the document is loading (e.g., after a page refresh).
When the flow is loading all its dependencies.
When a step is being loaded (since steps load asynchronously).

All these three fallbacks, depending on the flow, can sometimes happen, Onboarding flow is an example of it, just check after the checkout the loading states and header. Sometimes there is a header, sometimes there is no title, sometimes there is both.

These fallbacks they also happen sequentially, since after a page load, the flow needs to be loaded with its dependencies and the same for the step.

This PR idea is to add the same loading style that Stepper has when using the processing step, which should be a title, loading bar and a header.

To achieve that, I had added a fallback header that will render the reader properly when one of the three fallbacks above are being rendered.

Testing Instructions

Pull and run this branch or use live link
Navigate to any flow and pay attention to the loading states while navigating, but make sure to compare against prod side by side to see the difference
you can use the onboarding flow, for instance, /setup/onboarding/, pick a paid plan and check the redirects and loading after the checkout. (compare side by side with production).

github-actions · 2025-03-25T13:50:44Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-03-25T13:59:53Z

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

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

Details

name                   parsed_size           gzip_size
entry-login                +4746 B  (+0.2%)     +820 B  (+0.1%)
entry-main                 +4745 B  (+0.2%)    +1877 B  (+0.3%)
entry-stepper              +1707 B  (+0.1%)     -375 B  (-0.1%)
entry-domains-landing      +1535 B  (+0.2%)     +273 B  (+0.1%)
entry-browsehappy          +1535 B  (+0.8%)     +273 B  (+0.5%)
entry-subscriptions        +1432 B  (+0.1%)     +460 B  (+0.1%)

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

Sections (~55810 bytes added 📈 [gzipped])

Details

name                                parsed_size           gzip_size
account-close                           -7659 B  (-1.3%)    -2137 B  (-1.2%)
checkout                                -7478 B  (-0.4%)    -2608 B  (-0.5%)
marketplace                             -7302 B  (-1.3%)    -2395 B  (-1.4%)
import                                  -7162 B  (-0.9%)    -3253 B  (-1.4%)
staging-site                            -7081 B  (-0.5%)    -2663 B  (-0.6%)
signup                                  -7060 B  (-2.5%)    -2468 B  (-3.8%)
overview                                -7003 B  (-0.3%)    -2649 B  (-0.4%)
plans                                   -6982 B  (-0.3%)    -2454 B  (-0.4%)
a8c-for-agencies-client                 -5253 B  (-0.4%)    -1410 B  (-0.4%)
earn                                    -5136 B  (-0.6%)    -2646 B  (-1.0%)
jetpack-cloud                           -5096 B  (-1.3%)    -2093 B  (-1.7%)
theme                                   -5075 B  (-0.7%)    -1502 B  (-0.6%)
settings-jetpack                        -5051 B  (-0.9%)    -1784 B  (-1.1%)
hosting                                 -5033 B  (-0.3%)    -1975 B  (-0.4%)
a8c-for-agencies-sites                  -5018 B  (-0.2%)     -907 B  (-0.1%)
sites-dashboard                         -5012 B  (-0.4%)    -1897 B  (-0.5%)
site-performance                        -5012 B  (-0.3%)    -1949 B  (-0.4%)
site-monitoring                         -5012 B  (-0.4%)    -1921 B  (-0.5%)
google-my-business                      -5012 B  (-0.9%)    -1702 B  (-1.0%)
backup                                  -5010 B  (-0.4%)    -1626 B  (-0.5%)
themes                                  -5004 B  (-0.5%)    -1384 B  (-0.5%)
site-purchases                          -4988 B  (-0.2%)    -2784 B  (-0.4%)
purchases                               -4988 B  (-0.2%)    -2710 B  (-0.4%)
customize                               -4984 B  (-1.6%)    -1381 B  (-1.4%)
domains                                 -4955 B  (-0.2%)    -1965 B  (-0.3%)
site-settings                           -4929 B  (-0.3%)    -1980 B  (-0.4%)
plugins                                 -4929 B  (-0.1%)    -1913 B  (-0.2%)
jetpack-cloud-plugin-management         -4929 B  (-0.2%)    -1913 B  (-0.3%)
a8c-for-agencies-plugins                -4929 B  (-0.2%)    -1913 B  (-0.3%)
security                                -4927 B  (-0.6%)     -977 B  (-0.4%)
privacy                                 -4927 B  (-0.8%)    -1028 B  (-0.6%)
developer                               -4927 B  (-0.8%)    -1028 B  (-0.6%)
account                                 -4927 B  (-0.6%)    -1041 B  (-0.4%)
woocommerce-installation                -4909 B  (-1.5%)    -1773 B  (-1.8%)
preview                                 -4909 B  (-1.8%)    -1622 B  (-1.9%)
migrate                                 -4909 B  (-1.3%)    -1742 B  (-1.5%)
add-ons                                 -4909 B  (-1.2%)    -1794 B  (-1.3%)
email                                   -4908 B  (-0.5%)    -2041 B  (-0.7%)
jetpack-cloud-overview                  -4890 B  (-1.1%)    -2034 B  (-1.5%)
home                                    -4870 B  (-0.3%)    -1834 B  (-0.4%)
a8c-for-agencies-team                   -4863 B  (-0.5%)    -1156 B  (-0.4%)
jetpack-cloud-agency-dashboard          -4849 B  (-0.4%)     -765 B  (-0.2%)
jetpack-connect                         -4840 B  (-0.4%)     -528 B  (-0.2%)
settings                                -4836 B  (-0.5%)    -1039 B  (-0.3%)
activity                                -4825 B  (-0.6%)    -1650 B  (-0.8%)
site-blocks                             -4824 B  (-0.8%)     -986 B  (-0.5%)
reader                                  -4824 B  (-0.1%)    -1476 B  (-0.1%)
notification-settings                   -4824 B  (-0.7%)     -992 B  (-0.5%)
me                                      -4824 B  (-0.9%)     -998 B  (-0.6%)
help                                    -4824 B  (-0.8%)     -993 B  (-0.6%)
subscribers                             -4817 B  (-0.4%)    -2166 B  (-0.6%)
a8c-for-agencies-settings               -4811 B  (-2.2%)    -1348 B  (-2.0%)
a8c-for-agencies-landing                -4811 B  (-3.0%)    -1365 B  (-2.8%)
a8c-for-agencies-agency-tier            -4811 B  (-2.0%)    -1345 B  (-1.8%)
stats                                   -4805 B  (-0.4%)    -2061 B  (-0.6%)
site-logs                               -4805 B  (-0.4%)    -1915 B  (-0.5%)
a8c-for-agencies-woopayments            -4797 B  (-0.5%)      +18 B  (+0.0%)
a8c-for-agencies-migrations             -4797 B  (-0.5%)     -107 B  (-0.0%)
posts-custom                            -4795 B  (-0.7%)    -1383 B  (-0.6%)
posts                                   -4795 B  (-0.7%)    -1383 B  (-0.6%)
settings-security                       -4785 B  (-1.0%)    -1290 B  (-0.9%)
settings-podcast                        -4785 B  (-1.0%)    -1222 B  (-0.8%)
settings-performance                    -4785 B  (-0.9%)    -1115 B  (-0.7%)
github-deployments                      -4779 B  (-0.3%)    -1911 B  (-0.5%)
people                                  -4766 B  (-0.6%)    -1656 B  (-0.7%)
gutenberg-editor                        -4758 B  (-0.8%)    -1421 B  (-0.8%)
pages                                   -4752 B  (-1.0%)    -1503 B  (-1.0%)
switch-site                             -4746 B  (-2.4%)    -1341 B  (-2.3%)
patterns                                -4746 B  (-0.2%)    -1302 B  (-0.2%)
marketing                               -4734 B  (-0.6%)    -1935 B  (-0.8%)
concierge                               -4727 B  (-1.0%)    -1804 B  (-1.3%)
woocommerce                             -4713 B  (-1.6%)    -1469 B  (-1.6%)
jetpack-search                          -4713 B  (-0.8%)    -1481 B  (-0.9%)
jetpack-cloud-pricing                   -4713 B  (-0.6%)    -1129 B  (-0.5%)
jetpack-cloud-features-comparison       -4713 B  (-0.7%)    -1457 B  (-0.7%)
export                                  -4713 B  (-1.5%)    -1380 B  (-1.4%)
performance-profiler                    -4708 B  (-1.3%)    -1334 B  (-1.1%)
a8c-for-agencies-marketplace            -4708 B  (-0.5%)    -1299 B  (-0.4%)
a8c-for-agencies                        -4708 B  (-3.9%)    -1367 B  (-3.8%)
jetpack-social                          -4703 B  (-0.7%)    -1844 B  (-1.0%)
jetpack-cloud-settings                  -4686 B  (-0.6%)    -1557 B  (-0.7%)
settings-writing                        -4661 B  (-0.8%)    -1217 B  (-0.7%)
settings-reading                        -4661 B  (-1.1%)    -1085 B  (-0.9%)
settings-newsletter                     -4661 B  (-0.9%)    -1217 B  (-0.8%)
settings-discussion                     -4661 B  (-1.2%)    -1219 B  (-1.0%)
jetpack-cloud-partner-portal            -4656 B  (-0.5%)    -1351 B  (-0.5%)
a8c-for-agencies-purchases              -4643 B  (-0.6%)    -1334 B  (-0.6%)
a8c-for-agencies-overview               -4629 B  (-0.4%)    -1310 B  (-0.4%)
jetpack-cloud-agency-signup             -4618 B  (-5.6%)    -1339 B  (-4.9%)
a8c-for-agencies-signup                 -4618 B  (-2.1%)    -1359 B  (-2.0%)
a8c-for-agencies-partner-directory      -4618 B  (-0.9%)    -1359 B  (-0.8%)
jetpack-app                             -4605 B  (-1.0%)    -1341 B  (-0.9%)
accept-invite                           -4605 B  (-2.5%)    -1306 B  (-2.5%)
scan                                    -4596 B  (-0.5%)    -1439 B  (-0.6%)
promote-post-i2                         -4521 B  (-0.6%)    -1894 B  (-0.8%)
media                                   -4507 B  (-0.3%)    -1510 B  (-0.3%)
comments                                -4494 B  (-0.6%)    -1100 B  (-0.5%)
a8c-for-agencies-referrals              -4382 B  (-0.4%)    -1115 B  (-0.4%)
site-profiler                           -2133 B  (-0.7%)    -1031 B  (-1.2%)
async-step-unified-plans                 +328 B  (+0.0%)      +19 B  (+0.0%)
async-step-unified-domains               +328 B  (+0.0%)      +20 B  (+0.0%)
devdocs                                  -108 B  (-0.1%)      -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 (~12721 bytes removed 📉 [gzipped])

Details

name                                                                              parsed_size            gzip_size
async-load-design-blocks                                                              -4961 B   (-0.2%)    -2258 B   (-0.4%)
async-load-automattic-whats-new                                                       -4904 B  (-13.7%)    -1821 B  (-14.7%)
async-load-design-playground                                                          -4798 B   (-0.3%)    -1280 B   (-0.4%)
async-load-calypso-layout-command-palette                                             -4746 B   (-2.0%)    -1341 B   (-2.0%)
async-load-design-wordpress-components-gallery                                        -4708 B   (-0.5%)    -1378 B   (-0.6%)
async-load-calypso-blocks-jitm-templates-modal                                        -4708 B  (-18.1%)    -1405 B  (-15.7%)
async-load-automattic-help-center                                                     -4708 B   (-0.7%)    -1443 B   (-0.7%)
async-load-calypso-lib-account-settings-helper                                        -4643 B   (-2.6%)    -1326 B   (-2.4%)
async-load-quick-language-switcher                                                    -4605 B   (-3.8%)    -1314 B   (-3.2%)
async-load-design                                                                     -4305 B   (-0.3%)    -1175 B   (-0.3%)
async-load-calypso-blocks-editor-checkout-modal                                       -2667 B   (-0.2%)    -1258 B   (-0.4%)
async-load-calypso-lib-store-sandbox-helper                                           -1937 B   (-5.5%)     -628 B   (-5.8%)
async-load-purchase-modal-wrapper                                                      -191 B   (-0.0%)     -520 B   (-0.4%)
async-load-calypso-reader-sidebar                                                      -124 B   (-0.1%)       -5 B   (-0.0%)
async-load-calypso-my-sites-current-site-notice                                        -124 B   (-0.2%)       -9 B   (-0.0%)
async-load-calypso-components-web-preview-component                                    -124 B   (-0.0%)      -11 B   (-0.0%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                                -124 B   (-0.2%)       -7 B   (-0.0%)
async-load-calypso-blocks-jitm-templates-notice                                        -124 B   (-0.2%)       -7 B   (-0.0%)
async-load-calypso-blocks-jitm-templates-default                                       -124 B   (-0.2%)       -7 B   (-0.0%)
async-load-calypso-jetpack-cloud-sections-sidebar-navigation-manage-selected-...       -122 B   (-0.1%)      -27 B   (-0.1%)
async-load-comment-block-editor                                                        -103 B   (-0.0%)      -11 B   (-0.0%)
async-load-automattic-help-center-stepper                                              -103 B   (-0.0%)       -7 B   (-0.0%)
async-load-calypso-blocks-calendar-popover                                              +91 B   (+0.0%)     +711 B   (+1.3%)
async-load-signup-steps-user                                                            +53 B   (+0.0%)     +380 B   (+0.5%)
async-load-automattic-global-styles-src-components-global-styles-variations             -34 B   (-0.0%)      -10 B   (-0.0%)
async-load-automattic-design-preview                                                    -34 B   (-0.1%)      -10 B   (-0.1%)
async-load-signup-steps-page-picker                                                     -21 B   (-0.0%)     +116 B   (+0.1%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        -21 B   (-0.0%)      +41 B   (+0.0%)
async-load-signup-steps-woocommerce-install-step-store-address                          -13 B   (-0.0%)      -11 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.

matticbot · 2025-03-25T14:01:24Z

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

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

blaze-dashboard
notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/fallback_header_loading on your sandbox.

escapemanuele · 2025-03-25T14:51:37Z

client/components/async-load/index.tsx

+const DEFAULT_PLACEHOLDER = (
+	<div className="fallback-signup-header">
+		<FallbackHeader />
+		<Loading title="Turning on the lights" />


Let's add translations here and where you added a title

escapemanuele

Thanks Renan for working on this.

I believe this is re-introducing a problem, that is the loading bar jumping up and down, that creates a worse experience for the user.

With this PR (slow connection to better see):

VXNzJV.mp4

Production:

Qd56Qu.mp4

You can see that the bar stays in the same place in production, that's because we're here removing margin-tops.

escapemanuele · 2025-04-08T12:22:02Z

Work has been done here by Quake team already, so I'm closing this.

renancarvalho added 2 commits March 25, 2025 14:48

Add fallback header and proper loading

37a1a16

Merge branch 'trunk' into add/fallback_header_loading

7d64850

renancarvalho changed the title ~~Stepper: Add fallback header and loading~~ Stepper: Add fallback header and loading - DO NOT MERGE Mar 25, 2025

escapemanuele added this to Vertex Team Board Mar 25, 2025

github-project-automation bot moved this to In progress in Vertex Team Board Mar 25, 2025

escapemanuele moved this from In progress to Needs review in Vertex Team Board Mar 25, 2025

escapemanuele reviewed Mar 25, 2025

View reviewed changes

renancarvalho added 2 commits March 25, 2025 21:24

Add translations and refactoring

3fc84e5

Simplify component

c1a451a

renancarvalho requested a review from a team March 26, 2025 10:20

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 26, 2025

renancarvalho changed the title ~~Stepper: Add fallback header and loading - DO NOT MERGE~~ Stepper: Add fallback header and loading Mar 26, 2025

renancarvalho marked this pull request as ready for review March 26, 2025 10:23

renancarvalho requested a review from a team as a code owner March 26, 2025 10:23

renancarvalho added 2 commits March 26, 2025 11:26

Merge branch 'trunk' into add/fallback_header_loading

add7b2d

Fix loading alignment on /start

a14a428

escapemanuele requested changes Mar 27, 2025

View reviewed changes

escapemanuele closed this Apr 8, 2025

github-project-automation bot moved this from Needs review to Done in Vertex Team Board Apr 8, 2025

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Stepper: Add fallback header and loading#101840

Stepper: Add fallback header and loading#101840
renancarvalho wants to merge 6 commits intotrunkfrom
add/fallback_header_loading

renancarvalho commented Mar 25, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 25, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented Mar 25, 2025 •

edited

Loading

Uh oh!

matticbot commented Mar 25, 2025 •

edited

Loading

Uh oh!

escapemanuele Mar 25, 2025

Uh oh!

escapemanuele left a comment •

edited

Loading

Uh oh!

escapemanuele commented Apr 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Conversation

renancarvalho commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Uh oh!

github-actions bot commented Mar 25, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

escapemanuele Mar 25, 2025

Choose a reason for hiding this comment

Uh oh!

escapemanuele left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

escapemanuele commented Apr 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

renancarvalho commented Mar 25, 2025 •

edited

Loading

github-actions bot commented Mar 25, 2025 •

edited by matticbot

Loading

matticbot commented Mar 25, 2025 •

edited

Loading

matticbot commented Mar 25, 2025 •

edited

Loading

escapemanuele left a comment •

edited

Loading