Dashboard v2: lazy load current plan (expiry + manage link) #103601

ellatrix · 2025-05-21T17:40:11Z

Proposed Changes

Nothing changes for free plans.
Lazy load the current plan, which is needed for the manage link and the expiry date.
While the plan is loading, gracefully show a blurred text and link. In reality, this is so fast gone that it's not even visible, but just in case to prevent layout shifts.
What's more is that after the first time this data is cached for 24h, so it's instant in those cases.
To minimise the loading state even more, we prefetch the resource for preloading (while not letting it block the page request)
Perhaps one would consider this essential information and required to be in the loader, if so we can discuss it here. I'm on the fence myself, it was much clearer for the other cases.
Also adds a <time> tag for the date when it's loaded.

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 · 2025-05-21T17:40:23Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-05-21T17:40:42Z

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

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

name                    parsed_size           gzip_size
entry-dashboard-dotcom        +19 B  (+0.0%)       +8 B  (+0.0%)
entry-dashboard-a4a           +19 B  (+0.0%)       +8 B  (+0.0%)

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

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.

fushar

Lazy load the current plan
Perhaps one would consider this essential information and required to be in the loader, if so we can discuss it here. I'm on the fence myself, it was much clearer for the other cases.

I think it's fine for it to load async in the overview page, given its location at the bottom of the page, where my eyes would take time themselves to reach to that location.

Maybe a better way in the future, is to somehow preload/prefetch all required data for the site overview page, when we hover on the site from the grid, so by the time we click and land on the overview, they are all ready.

fushar · 2025-05-22T04:26:24Z

client/dashboard/sites/overview/site-card.tsx

+	/* translators: %s: date of plan's expiration date. Eg.  August 20, 2025 */
+	const expiresString = __( 'Expires on <time>%s</time>.' );
+
+	// Show a blurred time while we wait for the current plan.


This assumes that every plan has expiry, which is not true. For example, sites created via A4A won't have that, which breaks in this PR:

What is the value in that case?

It's null in such cases.

I believe it's already reflected in the type:

wp-calypso/client/dashboard/data/types.ts

Line 58 in 05935db

expiry?: string;

That would be undefined, no?

I fixed it in ad4fcee

Ok, I blurred the entire line instead.

I think it's semantically wrong, because the expiration / subscription actually exists but is managed by A4A 🥲

Wait, so doesn't the "manage subscription" link then also not make sense? I'm curious what info there is in the site.plan when it's an A4A site.

Ah right... seems so. BTW, this is how the site overview looks for A4A site in v1:

Perhaps we shouldn't worry about it now...

How do you check if it's managed? Is that in the plan? I don't have a site that is a4a atm, not sure how to test

Something like this 🙈

wp-calypso/client/lib/purchases/index.ts

Lines 890 to 892 in 474d76d

if ( isAgencyPartnerType( purchase.partnerType ) ) {

return i18n.translate( 'Agency Managed Plan' );

}

ellatrix · 2025-05-22T05:42:51Z

given its location at the bottom of the page

Looking at the new design explorations, this may change though.

Maybe a better way in the future, is to somehow preload/prefetch all required data for the site overview page, when we hover on the site from the grid, so by the time we click and land on the overview, they are all ready.

Interesting, so you're basically suggesting two types of resources:

Ones that should block page navigation.
Ones that can be prefetched, but shouldn't necessarily block page navigation, it's just nice if they're ready.

ellatrix · 2025-05-22T06:35:11Z

@fushar That's a cool suggestion, I implemented it in 55f89b5

matticbot · 2025-05-22T06:47:32Z

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 try/lazy-current-plan on your sandbox.

fushar · 2025-05-22T06:51:46Z

client/dashboard/sites/overview/site-card.tsx

+	/* translators: %s: date of plan's expiration date. Eg.  August 20, 2025 */
+	const expiresString = __( 'Expires on <time>%s</time>.' );
+
+	// Show a blurred time while we wait for the current plan.


But it means there will still be layout shift for such sites.

Maybe that's OK for now; in general I believe A4A sites should be handled / shown differently in the overview page.

fushar · 2025-05-22T06:52:11Z

client/dashboard/sites/overview/site-card.tsx

+	/* translators: %s: date of plan's expiration date. Eg.  August 20, 2025 */
+	const expiresString = __( 'Expires on <time>%s</time>.' );
+
+	// Show a blurred time while we wait for the current plan.


That would be undefined, no?

I always forgot the difference between ? and null 🤦

fushar · 2025-05-22T08:31:01Z

client/dashboard/sites/overview/site-card.tsx

+	// Some plans don't have an expiry date, and we don't want to show it at
+	// all.
+	if ( ! currentPlan.expiry ) {
+		return __( 'No expiration date.' );


Let's return nothing here as per the comment above?

Yes, but then there will be a layout shift. I'll look into properly handling it when it's a4a managed.

OK, I was just going to suggest to do it separately, not sure if it's worth handling it now since it's very likely that the design will change for A4A sites.

Ok, sure, let's do that. I think the new design has it in card as well, so in that case it would be fixed height and now something that could cause a shift.

fushar

Re-tested 👍

client/dashboard/sites/overview/site-card.tsx

ellatrix · 2025-05-22T10:30:09Z

client/dashboard/app/style.scss

@@ -40,3 +40,10 @@ h1 {
 	font-family: var( --dashboard-h1__font-family );
 	font-weight: var( --dashboard-h1__font-weight ) !important;
 }
+
+.is-blurred {


This is way more versatile, can be used with any element.

I'm not 100% confident with this; this seems to be the first "free-style" CSS in the dashboard root code. Wanted to get input from @youknowriad .

After contemplating, it seems that the "canonical" way is to implement this on <Text>, something like <Text variant="blurred">. But of course that's not going to happen 😄

I prefer a component over reusing a CSS indeed.

I think we should avoid utility CSS as it quickly becomes non easily manageable (disconnect between usage and declaration causing dead code over time...)

After contemplating, it seems that the "canonical" way is to implement this on <Text>

No, because we want this on more than just text.

If not a class, then it should be a hook. I don't care either way, but I don't see anything wrong with classes tbh.

(please don't make this a blocker though, I'm fine either way)

@youknowriad The button has to be disabled/inert too, which is directly caused by the blurring/placeholder state, so imo these should go together

Maybe @youknowriad meant that we keep the split, but in the loading case, we render a disabled <Button> which has a <TextBlur> inside it?

That's what I understood yes, but imo blur and inert/hidden should always go together with blur. I don't mind either way I guess. I'll change it later

Because I will have to add inert/aria-hidden (same) to TextBlur, and then the implementor has to add it once more to the button. Tbh, I don't get at all what's wrong with having props instead of a component :)

a8ci18n · 2025-05-27T14:20:19Z

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

Some locales (Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

ellatrix requested review from youknowriad and a team as code owners May 21, 2025 17:40

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels May 21, 2025

fushar reviewed May 22, 2025

View reviewed changes

fushar approved these changes May 22, 2025

View reviewed changes

fushar reviewed May 22, 2025

View reviewed changes

fushar approved these changes May 22, 2025

View reviewed changes

fushar reviewed May 22, 2025

View reviewed changes

client/dashboard/sites/overview/site-card.tsx Outdated Show resolved Hide resolved

ellatrix commented May 22, 2025

View reviewed changes

ellatrix added 10 commits May 26, 2025 09:11

Dashboard v2: lazy load current plan (expiry + manage link)

6fc98a5

instant load for free plan

103a13c

prefetch or preload

d76d18f

Fix for no expiration date

d0cd268

Fix for no expiry date

7ccee46

Remove no expiry message

92dfa74

Fix inert and component call

180ff59

simplify, make more readable

bdaed9b

Move css to function

e4c5808

Improve util function

016436b

ellatrix force-pushed the try/lazy-current-plan branch from 28fcad3 to 016436b Compare May 26, 2025 07:33

Split loading vs non-loading

f46c71b

ellatrix force-pushed the try/lazy-current-plan branch from abdcc7a to f46c71b Compare May 26, 2025 13:07

fushar approved these changes May 26, 2025

View reviewed changes

Restore component

0f3e84e

ellatrix merged commit 31d8cdb into trunk May 27, 2025
11 checks passed

ellatrix deleted the try/lazy-current-plan branch May 27, 2025 13:16

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 May 27, 2025

fushar mentioned this pull request May 28, 2025

Dashboard: Add reset site to settings. #103723

Open

8 tasks

	if ( isAgencyPartnerType( purchase.partnerType ) ) {
	return i18n.translate( 'Agency Managed Plan' );
	}

Dashboard v2: lazy load current plan (expiry + manage link) #103601

Dashboard v2: lazy load current plan (expiry + manage link) #103601

Conversation

ellatrix commented May 21, 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

Pre-merge Checklist

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

fushar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ellatrix commented May 22, 2025

Uh oh!

ellatrix commented May 22, 2025

Uh oh!

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fushar left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

youknowriad May 22, 2025 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ellatrix commented May 21, 2025 •

edited

Loading

github-actions bot commented May 21, 2025 •

edited by matticbot

Loading

matticbot commented May 21, 2025 •

edited

Loading

matticbot commented May 22, 2025 •

edited

Loading

youknowriad May 22, 2025 •

edited

Loading

a8ci18n commented May 27, 2025 •

edited

Loading