Boost: Fix empty performance history on initial page load (#35211)

* Load performance history data on-mount but keep it for longer

* Refresh performance history on score update

* changelog

* Add a clarification comment

Author: haqadn

projects/plugins/boost/app/assets/src/js/features/performance-history/lib/hooks.ts

@@ -27,7 +27,12 @@ export const usePerformanceHistoryQuery = () => {
 	const [ query ] = useDataSync(
 		'jetpack_boost_ds',
 		'performance_history',
-		performanceHistoryDataSchema
+		performanceHistoryDataSchema,
+		{
+			query: {
+				staleTime: 12 * 60 * 60 * 1000, // 12 hours
+			},
+		}
 	);
 
 	return query;

projects/plugins/boost/app/assets/src/js/features/performance-history/performance-history.tsx

@@ -12,6 +12,7 @@ import { Button } from '@automattic/jetpack-components';
 import { useNavigate } from 'react-router-dom';
 import { useSingleModuleState } from '$features/module/lib/stores';
 import styles from './performance-history.module.scss';
+import { useEffect } from 'react';
 
 const PerformanceHistoryBody = () => {
 	const [ performanceHistoryState ] = useSingleModuleState( 'performance_history' );
@@ -23,6 +24,13 @@ const PerformanceHistoryBody = () => {
 	);
 	const navigate = useNavigate();
 
+	/*
+	 * Fetch new data on initial page-load. This is a lazy data-sync and initially empty.
+	 */
+	useEffect( () => {
+		refetch();
+	}, [ refetch ] );
+
 	if ( isError && ! isFetching ) {
 		return (
 			<ErrorNotice
@@ -44,7 +52,7 @@ const PerformanceHistoryBody = () => {
 			needsUpgrade={ needsUpgrade }
 			handleUpgrade={ () => navigate( '/upgrade' ) }
 			handleDismissFreshStart={ dismissFreshStart }
-			isLoading={ isFetching }
+			isLoading={ isFetching && ( ! data || data.periods.length === 0 ) }
 		/>
 	);
 };

projects/plugins/boost/app/assets/src/js/features/speed-score/speed-score.tsx

@@ -18,6 +18,7 @@ import styles from './speed-score.module.scss';
 import { useModulesState } from '$features/module/lib/stores';
 import { useCriticalCssState } from '$features/critical-css/lib/stores/critical-css-state';
 import { useLocalCriticalCssGeneratorStatus } from '$features/critical-css/local-generator/local-generator-provider';
+import { queryClient } from '@automattic/jetpack-react-data-sync-client';
 
 const SpeedScore = () => {
 	const { site } = Jetpack_Boost;
@@ -50,6 +51,13 @@ const SpeedScore = () => {
 		}
 	}, [ loadScore, site.online ] );
 
+	// Mark performance history data as stale when speed scores are loaded.
+	useEffect( () => {
+		if ( site.online && status === 'loaded' ) {
+			queryClient.invalidateQueries( { queryKey: [ 'performance_history' ] } );
+		}
+	}, [ site.online, status ] );
+
 	useDebouncedRefreshScore(
 		{ moduleStates, criticalCssCreated: cssState.created || 0, criticalCssIsGenerating },
 		async () => {

projects/plugins/boost/changelog/fix-performance-history

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fixed empty performance history on initial page load. Introduced during react migration
+
+