prefetch or preload

Author: ellatrix

client/dashboard/app/router.tsx

@@ -15,6 +15,7 @@ import {
 	domainsQuery,
 	emailsQuery,
 	profileQuery,
+	siteCurrentPlanQuery,
 	siteEngagementStatsQuery,
 } from './queries';
 import { queryClient } from './query-client';
@@ -75,8 +76,13 @@ const siteRoute = createRoute( {
 const siteOverviewRoute = createRoute( {
 	getParentRoute: () => siteRoute,
 	path: '/',
-	loader: ( { params: { siteSlug } } ) =>
-		queryClient.ensureQueryData( siteEngagementStatsQuery( siteSlug ) ),
+	loader: ( { params: { siteSlug }, preload } ) =>
+		Promise.all( [
+			// The current plan is nice to have preloaded, but not blocking for
+			// navigation.
+			preload ? queryClient.ensureQueryData( siteCurrentPlanQuery( siteSlug ) ) : undefined,
+			queryClient.ensureQueryData( siteEngagementStatsQuery( siteSlug ) ),
+		] ),
 } ).lazy( () =>
 	import( '../sites/overview' ).then( ( d ) =>
 		createLazyRoute( 'site-overview' )( {

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

@@ -126,7 +126,7 @@ function PlanDetails( { site }: { site: Site } ) {
 			) : (
 				<Button
 					// @ts-expect-error inert is not typed
-					inert={ ! currentPlan }
+					inert={ ( ! currentPlan ).toString() }
 					href={ currentPlan ? `/purchases/subscriptions/${ site.slug }/${ currentPlan.id }` : '' }
 					variant="link"
 				>