From dee6c50e784e88dcec0685080ef6306d76ae839a Mon Sep 17 00:00:00 2001
From: Louis Laugesen <louis.laugesen@gmail.com>
Date: Tue, 22 Oct 2024 15:13:31 +1100
Subject: [PATCH] Avoid getTheme call when slug is null (#95570)

---
 .../features/live-preview/hooks/use-previewing-theme.ts    | 7 +++++++
 .../src/wpcom/features/live-preview/index.tsx              | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts b/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts
index eee04b74f1e13..d0918f2eda715 100644
--- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts
+++ b/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts
@@ -45,6 +45,13 @@ export const usePreviewingTheme = () => {
 	const previewingThemeSlug = usePreviewingThemeSlug();
 	const { previewingThemeName } = useSelect(
 		( select ) => {
+			// Avoid calling getTheme with null - fetches all site /themes (10s~)
+			if ( ! previewingThemeSlug ) {
+				return {
+					previewingThemeSlug,
+					previewingThemeName: undefined,
+				};
+			}
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			const previewingTheme = ( select( 'core' ) as any ).getTheme( previewingThemeSlug );
 
diff --git a/apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx b/apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx
index ce7b36c52be11..a65f7a4b9ed35 100644
--- a/apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx
+++ b/apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx
@@ -1,16 +1,23 @@
 import { useSelect } from '@wordpress/data';
 import domReady from '@wordpress/dom-ready';
 import { registerPlugin } from '@wordpress/plugins';
+import { usePreviewingThemeSlug } from './hooks/use-previewing-theme';
 import LivePreviewNoticePlugin from './live-preview-notice-plugin';
 
 const LivePreviewPlugin = () => {
 	const siteEditorStore = useSelect( ( select ) => select( 'core/edit-site' ), [] );
+	const previewingThemeSlug = usePreviewingThemeSlug();
 
 	// Do nothing outside the Site Editor context.
 	if ( ! siteEditorStore ) {
 		return null;
 	}
 
+	// Don't render unless the user is previewing a theme.
+	if ( ! previewingThemeSlug ) {
+		return null;
+	}
+
 	return <LivePreviewNoticePlugin />;
 };