Dashboard v2: lazy load php version (#103558)

Author: ellatrix

client/dashboard/app/router.tsx

@@ -18,7 +18,6 @@ import {
 	siteCurrentPlanQuery,
 	siteEngagementStatsQuery,
 	siteMonitorUptimeQuery,
-	sitePHPVersionQuery,
 } from './queries';
 import { queryClient } from './query-client';
 import Root from './root';
@@ -94,9 +93,6 @@ const siteOverviewRoute = createRoute( {
 			site.jetpack && site.jetpack_modules.includes( 'monitor' )
 				? queryClient.ensureQueryData( siteMonitorUptimeQuery( siteSlug ) )
 				: undefined,
-			site.is_wpcom_atomic
-				? queryClient.ensureQueryData( sitePHPVersionQuery( siteSlug ) )
-				: undefined,
 		] );
 	},
 } ).lazy( () =>

client/dashboard/sites/overview/index.tsx

@@ -12,7 +12,6 @@ import { wordpress } from '@wordpress/icons';
 import {
 	siteQuery,
 	siteMonitorUptimeQuery,
-	sitePHPVersionQuery,
 	siteCurrentPlanQuery,
 	siteEngagementStatsQuery,
 } from '../../app/queries';
@@ -39,10 +38,6 @@ function SiteOverview() {
 		...siteMonitorUptimeQuery( siteSlug ),
 		enabled: site?.jetpack && site?.jetpack_modules.includes( 'monitor' ),
 	} );
-	const { data: phpVersion } = useQuery( {
-		...sitePHPVersionQuery( siteSlug ),
-		enabled: site?.is_wpcom_atomic,
-	} );
 	const { data: currentPlan } = useQuery( siteCurrentPlanQuery( siteSlug ) );
 	const { data: engagementStats } = useQuery( siteEngagementStatsQuery( siteSlug ) );
 
@@ -73,7 +68,7 @@ function SiteOverview() {
 			}
 		>
 			<HStack alignment="flex-start" spacing={ 8 }>
-				<Sidebar site={ site } phpVersion={ phpVersion } currentPlan={ currentPlan } />
+				<Sidebar site={ site } currentPlan={ currentPlan } />
 				<VStack spacing={ 8 }>
 					<Card style={ { padding: '16px' } }>
 						<VStack>

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

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
@@ -8,23 +9,24 @@ import {
 } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
+import { sitePHPVersionQuery } from '../../app/queries';
 import { getSiteStatusLabel } from '../../utils/site-status';
 import SitePreview from '../site-preview';
 import type { Site, Plan } from '../../data/types';
 
+function TextBlur( { text }: { text: string } ) {
+	return <span className="text-blur" data-text={ text } />;
+}
+
+function PHPVersion( { siteSlug }: { siteSlug: string } ) {
+	return useQuery( sitePHPVersionQuery( siteSlug ) ).data ?? <TextBlur text="X.Y" />;
+}
+
 /**
  * SiteCard component to display site information in a card format
  */
-export default function SiteCard( {
-	site,
-	phpVersion,
-	currentPlan,
-}: {
-	site: Site;
-	phpVersion?: string;
-	currentPlan: Plan;
-} ) {
-	const { options, URL: url, is_private } = site;
+export default function SiteCard( { site, currentPlan }: { site: Site; currentPlan: Plan } ) {
+	const { options, URL: url, is_private, is_wpcom_atomic } = site;
 	// If the site is a private A8C site, X-Frame-Options is set to same
 	// origin.
 	const iframeDisabled = site.is_a8c && is_private;
@@ -65,12 +67,18 @@ export default function SiteCard( {
 					<HStack justify="space-between">
 						<Field title={ __( 'Status' ) }>{ getSiteStatusLabel( site ) }</Field>
 					</HStack>
-					<HStack justify="space-between">
-						{ options?.software_version && (
-							<Field title={ __( 'WordPress' ) }>{ options.software_version }</Field>
-						) }
-						{ phpVersion && <Field title={ __( 'PHP' ) }>{ phpVersion }</Field> }
-					</HStack>
+					{ ( options?.software_version || is_wpcom_atomic ) && (
+						<HStack justify="space-between">
+							{ options?.software_version && (
+								<Field title={ __( 'WordPress' ) }>{ options.software_version }</Field>
+							) }
+							{ is_wpcom_atomic && (
+								<Field title={ __( 'PHP' ) }>
+									<PHPVersion siteSlug={ site.slug } />
+								</Field>
+							) }
+						</HStack>
+					) }
 					<PlanDetails site={ site } currentPlan={ currentPlan } />
 				</VStack>
 			</VStack>
@@ -80,7 +88,7 @@ export default function SiteCard( {
 
 function Field( { children, title }: { children: React.ReactNode; title: React.ReactNode } ) {
 	return (
-		<VStack className="site-overview-field">
+		<VStack className="site-overview-field" style={ { flex: 1 } }>
 			<FieldTitle>{ title }</FieldTitle>
 			<div className="site-overview-field-children">{ children }</div>
 		</VStack>

client/dashboard/sites/overview/style.scss

@@ -24,3 +24,8 @@
 		display: none;
 	}
 }
+
+.text-blur::after {
+	content: attr(data-text);
+	filter: blur(4px);
+}