Stats post detail: prefetch email tab availability and seed it from the email pages

client/my-sites/stats/controller.jsx

@@ -6,10 +6,13 @@ import AsyncLoad from 'calypso/components/async-load';
 import { bumpStat } from 'calypso/lib/analytics/mc';
 import { getSiteFragment, getStatsDefaultSitePage } from 'calypso/lib/route';
 import { getMomentSiteZone } from 'calypso/my-sites/stats/hooks/use-moment-site-zone';
-import { getSite } from 'calypso/state/sites/selectors';
+import isJetpackModuleActive from 'calypso/state/selectors/is-jetpack-module-active';
+import { getSite, isSimpleSite } from 'calypso/state/sites/selectors';
+import getEnvStatsFeatureSupportChecks from 'calypso/state/sites/selectors/get-env-stats-feature-supports';
 import { setNextLayoutFocus } from 'calypso/state/ui/layout-focus/actions';
 import { getCurrentLayoutFocus } from 'calypso/state/ui/layout-focus/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+import { postEmailStatsAvailabilityQueryOptions } from './hooks/use-post-email-stats-availability-query';
 import { rangeOfPeriod, getSiteFilters } from './pages/shared/helpers';
 import PageLoading from './pages/shared/page-loading';
 import StatsSite from './site';
@@ -416,6 +419,21 @@ export function post( context, next ) {
 		return next();
 	}
 
+	// Resolve email tab availability in parallel with the chunk download, so the
+	// tab strip doesn't pop in after the page renders.
+	const state = context.store.getState();
+	const { supportsEmailStats } = getEnvStatsFeatureSupportChecks( state, siteId );
+	// Module state is often not loaded yet at route time (QueryJetpackModules runs
+	// after mount, and /me/sites does not carry active_modules), so only a definite
+	// "inactive" skips the warm-up; the page's own `enabled` check stays strict.
+	const canHaveEmailStats =
+		!! supportsEmailStats &&
+		( isSimpleSite( state, siteId ) ||
+			isJetpackModuleActive( state, siteId, 'subscriptions', true ) !== false );
+	if ( canHaveEmailStats && postId > 0 ) {
+		context.queryClient.prefetchQuery( postEmailStatsAvailabilityQueryOptions( siteId, postId ) );
+	}
+
 	context.primary = (
 		<StatsPageLoader>
 			<AsyncLoad

client/my-sites/stats/hooks/use-post-email-stats-availability-query.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions, useQuery, type QueryClient } from '@tanstack/react-query';
 import wpcom from 'calypso/lib/wp';
 import getDefaultQueryParams from './default-query-params';
 
@@ -15,20 +15,11 @@ function queryEmailRate( siteId: number | null, postId: number ): Promise< Email
 	return wpcom.req.get( `/sites/${ siteId }/stats/opens/emails/${ postId }/rate` );
 }
 
-/**
- * Whether a post was ever sent as a newsletter email, based on the email stats themselves
- * rather than post metadata, which does not always reflect what was actually sent.
- */
-export default function usePostEmailStatsAvailabilityQuery(
-	siteId: number | null,
-	postId: number,
-	enabled = true
-) {
-	return useQuery( {
+export function postEmailStatsAvailabilityQueryOptions( siteId: number | null, postId: number ) {
+	return queryOptions( {
 		...getDefaultQueryParams(),
 		queryKey: [ 'stats', 'emails', 'opens', 'rate', siteId, postId ],
 		queryFn: () => queryEmailRate( siteId, postId ),
-		enabled: !! enabled && !! siteId && postId > 0,
 		// A "no email stats" answer can be transient while a newsletter is still being sent,
 		// so only a positive result is kept for a while.
 		staleTime: ( query ) => ( hasEmailStats( query.state.data ) ? 1000 * 60 * 5 : 1000 * 30 ),
@@ -37,6 +28,37 @@ export default function usePostEmailStatsAvailabilityQuery(
 		// (the shared defaults set retryOnMount: false).
 		retryOnMount: true,
 		meta: { persist: false },
+	} );
+}
+
+/**
+ * Mark a post as having email stats without waiting for the request, for navigations
+ * from a page that already proves they exist (e.g. the email detail tabs). The counts
+ * are a placeholder; nothing reads them besides hasEmailStats. Real responses win.
+ */
+export function seedPostEmailStatsAvailability(
+	queryClient: QueryClient,
+	siteId: number | null,
+	postId: number
+) {
+	const { queryKey } = postEmailStatsAvailabilityQueryOptions( siteId, postId );
+	if ( queryClient.getQueryData( queryKey ) === undefined ) {
+		queryClient.setQueryData( queryKey, { total_sends: 1 } );
+	}
+}
+
+/**
+ * Whether a post was ever sent as a newsletter email, based on the email stats themselves
+ * rather than post metadata, which does not always reflect what was actually sent.
+ */
+export default function usePostEmailStatsAvailabilityQuery(
+	siteId: number | null,
+	postId: number,
+	enabled = true
+) {
+	return useQuery( {
+		...postEmailStatsAvailabilityQueryOptions( siteId, postId ),
+		enabled: !! enabled && !! siteId && postId > 0,
 		select: hasEmailStats,
 	} );
 }

client/my-sites/stats/stats-details-navigation/index.tsx

@@ -1,8 +1,12 @@
 import page from '@automattic/calypso-router';
+import { useQueryClient } from '@tanstack/react-query';
 import { TabPanel } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import PropTypes from 'prop-types';
 import { useMemo } from 'react';
+import { useSelector } from 'calypso/state';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+import { seedPostEmailStatsAvailability } from '../hooks/use-post-email-stats-availability-query';
 
 interface StatsDetailsNavigationProps {
 	postId: number;
@@ -18,6 +22,8 @@ function StatsDetailsNavigationImproved( {
 	givenSiteId,
 }: StatsDetailsNavigationProps ) {
 	const translate = useTranslate();
+	const queryClient = useQueryClient();
+	const selectedSiteId = useSelector( getSelectedSiteId );
 	const tabs = useMemo(
 		() => ( {
 			highlights: translate( 'Post traffic' ),
@@ -55,6 +61,12 @@ function StatsDetailsNavigationImproved( {
 				if ( tabName !== selectedTab ) {
 					const tab = tabPanelTabs.find( ( tab ) => tab.name === tabName );
 					if ( tab?.path ) {
+						if ( tabName === 'highlights' && [ 'opens', 'clicks' ].includes( selectedTab ) ) {
+							// Being on an email tab proves this post has email stats; seed the
+							// availability cache so the post detail page shows the tabs
+							// without waiting for the /rate request.
+							seedPostEmailStatsAvailability( queryClient, selectedSiteId, postId );
+						}
 						page( tab.path );
 					}
 				}