Hosting Dashboard v2: view transitions (part 1)

[ellatrix]

Fixes DOTCOM-13060

Please note: Firefox does not support view transitions.

Screen.Recording.2025-05-09.at.17.27.33.mov

Proposed Changes

Adds view transitions for routes:

• Main header will cross fade
• Secondary header will slide in/out when it appears/disappears only. When that happens the main body should be pushed down/up.
• Main body title should stay in place, main button should shrink/expand.
• Main card should shrink expand and stay in place.

As discussed with @ntsekouras and @youknowriad I moved the header back into PageLayout to restore the content div.

Why are these changes being made?

Testing Instructions

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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• 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-aUh-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-144866&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

• help-center
• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug try/view-transitions on your sandbox.

[matticbot]

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

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

name                    parsed_size           gzip_size
entry-dashboard-dotcom      +1902 B  (+0.2%)     +242 B  (+0.1%)
entry-dashboard-a4a         +1902 B  (+0.2%)     +237 B  (+0.1%)
entry-subscriptions          +401 B  (+0.0%)     +128 B  (+0.0%)
entry-reauth-required        +401 B  (+0.0%)     -258 B  (-0.0%)
entry-main                   +401 B  (+0.0%)     -286 B  (-0.0%)
entry-domains-landing        +401 B  (+0.1%)     +128 B  (+0.1%)
entry-browsehappy            +401 B  (+0.2%)     +128 B  (+0.2%)
entry-stepper                +329 B  (+0.0%)     +125 B  (+0.0%)
entry-login                  +283 B  (+0.0%)     -597 B  (-0.1%)

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

Sections (~291 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-step-unified-plans       +130 B  (+0.0%)     +291 B  (+0.1%)

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 (~291 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected       +130 B  (+0.0%)     +291 B  (+0.2%)
async-load-signup-steps-plans                         +130 B  (+0.0%)     +291 B  (+0.2%)

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.

[ntsekouras]

That's really cool to see!

[ntsekouras]

Why would we need to add VStack in various pages? Also have you removed the description intentionally?

[ellatrix]

Yes, the description is not present in the designs, so I removed it.

It's necessary for there to be some content because otherwise the content will slide in (from nothing) instead of cross fade.

[ntsekouras]

Should we just add a placeholder paragraph then instead of these? Also PageLayout is a VStack wrapper and its children are wrapped.

[ellatrix]

I don't understand what you mean. I added the VStack because billing has that too for the summary buttons. Why a paragraph? These should because summary buttons, not paragraphs.

[fushar]

This is so cool! I've added @Automattic/dotcom-design (apologize if I'm pinging too many folks) to check if this OK design-wise for dotcom.

[youknowriad]

I like that it feels not intrusive like that. It's its own CSS file that we can remove and iterate on as needed. I don't like that we have to use classnames for things that are rendered in different places to achieve it though.

I'm not sure yet what's the best approach.

[youknowriad]

This is really cool to me. It makes the dashboard feel more "finished"/"polished". The current transitions are not perfect and we could improve a lot. But it's a great start.

[matt-west]

Nice work @ellatrix. Tagging @marko-srb, @sfougnier, and @nick-a8c to review as they’re looking into interactions and motion from the brand-side.

[ellatrix]

@matt-west Just a note: I'm actually not adding any new animations here, they are all default browser animations that I'm taking advantage of by telling the browser what to move. While there's some flexibility on what to move, I wouldn't mess with custom animations right now.

[matt-west]

@ellatrix Oh nice! I still think it's worth the brand team looking at this as they were planning to work on how motion can be incorporated into the dashboard. We don’t have to implement any feedback as part of this PR though.

[ellatrix]

What's blocking here?

[matt-west]

@ellatrix Nothing from a design perspective. I’m happy for this to be merged.

[youknowriad]

We forgot reduced animation support.