Split loading vs non-loading

Author: ellatrix

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

@@ -11,15 +11,15 @@ import { dateI18n } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { sitePHPVersionQuery, siteCurrentPlanQuery } from '../../app/queries';
-import { getIsBlurredProps } from '../../utils/is-blurred';
+import { IS_BLURRED_PROPS } from '../../utils/is-blurred';
 import { getSiteStatusLabel } from '../../utils/site-status';
 import { getFormattedWordPressVersion } from '../../utils/wp-version';
 import SitePreview from '../site-preview';
 import type { Site } from '../../data/types';
 
 function PHPVersion( { siteSlug }: { siteSlug: string } ) {
 	return (
-		useQuery( sitePHPVersionQuery( siteSlug ) ).data ?? <span { ...getIsBlurredProps() }>X.Y</span>
+		useQuery( sitePHPVersionQuery( siteSlug ) ).data ?? <span { ...IS_BLURRED_PROPS }>X.Y</span>
 	);
 }
 
@@ -130,20 +130,26 @@ function PlanDetails( { site }: { site: Site } ) {
 				</>
 			) : (
 				<>
-					<Text { ...getIsBlurredProps( { enabled: ! currentPlan } ) }>
-						{ getPlanExpirationMessage(
-							currentPlan ? currentPlan.expiry : new Date().toISOString()
-						) }
-					</Text>
-					<Button
-						{ ...getIsBlurredProps( { enabled: ! currentPlan } ) }
-						href={
-							currentPlan ? `/purchases/subscriptions/${ site.slug }/${ currentPlan.id }` : ''
-						}
-						variant="link"
-					>
-						{ __( 'Manage subscription' ) }
-					</Button>
+					{ currentPlan ? (
+						<>
+							<Text>{ getPlanExpirationMessage( currentPlan.expiry ) }</Text>
+							<Button
+								href={ `/purchases/subscriptions/${ site.slug }/${ currentPlan.id }` }
+								variant="link"
+							>
+								{ __( 'Manage subscription' ) }
+							</Button>
+						</>
+					) : (
+						<>
+							<Text { ...IS_BLURRED_PROPS }>
+								{ getPlanExpirationMessage( new Date().toISOString() ) }
+							</Text>
+							<Button { ...IS_BLURRED_PROPS } href="" variant="link">
+								{ __( 'Manage subscription' ) }
+							</Button>
+						</>
+					) }
 				</>
 			) }
 		</VStack>

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

@@ -3,7 +3,7 @@ import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { connection } from '@wordpress/icons';
 import { siteMonitorUptimeQuery } from '../../app/queries';
-import { getIsBlurredProps } from '../../utils/is-blurred';
+import { IS_BLURRED_PROPS } from '../../utils/is-blurred';
 import OverviewCard, { OverviewCardProgressBar } from '../overview-card';
 import type { Site } from '../../data/types';
 
@@ -35,7 +35,7 @@ function UptimeCardEnabled( { siteSlug }: { siteSlug: string } ) {
 			heading={
 				uptimePercentage === undefined ? (
 					<>
-						<span { ...getIsBlurredProps() }>{ sprintf( percentageString, '100' ) }</span>
+						<span { ...IS_BLURRED_PROPS }>{ sprintf( percentageString, '100' ) }</span>
 						<VisuallyHidden>{ __( 'Loading…' ) }</VisuallyHidden>
 					</>
 				) : (

client/dashboard/utils/is-blurred/index.ts

@@ -1,5 +1,8 @@
 import './style.scss';
 
-export function getIsBlurredProps( { enabled = true }: { enabled?: boolean } = {} ) {
-	return enabled ? { className: 'is-blurred', inert: 'true' } : {};
-}
+export const IS_BLURRED_PROPS = {
+	className: 'is-blurred',
+	// Even for non-interactive elements we want this because it's equivalent to
+	// `aria-hidden="true"`.
+	inert: true,
+};