Theme SSR: Add a loading trigger to guarantee the same initial state …

…for components
Automattic · Jun 9, 2023 · 9a94552 · 9a94552
1 parent 0b3ed57
commit 9a94552
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx
@@ -152,7 +152,13 @@ class ThemeSheet extends Component {
 		section: '',
 	};
 
+	/**
+	 * ssrLoadingTrigger is a flag to guarantee the isLoading method always starts with true
+	 * It allows the initial state to always be the same to make SSR work properly
+	 * It starts with true but is right way updated to false on componentDidMount
+	 */
 	state = {
+		ssrLoadingTrigger: true,
 		showUnlockStyleUpgradeModal: false,
 	};
 
@@ -167,6 +173,10 @@ class ThemeSheet extends Component {
 		if ( syncActiveTheme ) {
 			themeStartActivationSync( siteId, themeId );
 		}
+
+		// Actual value for the trigger, to not interfere with the loading check
+		// eslint-disable-next-line react/no-did-mount-set-state
+		this.setState( { ssrLoadingTrigger: false } );
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -188,8 +198,12 @@ class ThemeSheet extends Component {
 
 	isLoading = () => {
 		const { isLoading, isThemeActivationSyncStarted } = this.props;
-		const { isAtomicTransferCompleted } = this.state;
-		return isLoading || ( isThemeActivationSyncStarted && ! isAtomicTransferCompleted );
+		const { isAtomicTransferCompleted, ssrLoadingTrigger } = this.state;
+		return (
+			isLoading ||
+			( isThemeActivationSyncStarted && ! isAtomicTransferCompleted ) ||
+			ssrLoadingTrigger
+		);
 	};
 
 	// If a theme has been removed by a theme shop, then the theme will still exist and a8c will take over any support responsibilities.