Fix thumbnail not loading for newly created sites

[ivan-ottinger]

Related issues

• Fixes STU-1212

Proposed Changes

When a new site is created, there was a race condition in the IPC event sequencing:

1. theme-details-loaded arrives and sets loadingThemeDetails = false
2. thumbnail-loading hasn't arrived yet, so loadingThumbnails is still undefined
3. The component briefly exits loading state and tries to render the thumbnail with empty src
4. This triggers the img onError, setting the error state permanently
5. When thumbnail-loaded finally arrives, the error state is already set and "Preview unavailable" is shown

The fix ensures proper sequencing by:

• Sending thumbnail-loading early (at the same time as theme-details-loading) when creating a new site
• Always sending thumbnail-loaded or thumbnail-load-error to complete the loading state
• For window focus with theme changes, sending thumbnail-loading before updating the thumbnail so the skeleton shows

Testing Instructions

New site creation

1. Create a new site
2. Observe that the loading skeleton is displayed while the site is starting
3. Once the site is running, the thumbnail should load correctly (no "Preview unavailable")

Theme changes

1. Start an existing site
2. Open the site in browser and change the theme via WP Admin → Appearance → Themes
3. Switch focus back to Studio
4. The loading skeleton should appear briefly while the new thumbnail is generated
5. The new theme's thumbnail should display correctly

Error handling

1. Apply this diff to simulate a thumbnail loading error:

diff --git a/src/ipc-handlers.ts b/src/ipc-handlers.ts
--- a/src/ipc-handlers.ts
+++ b/src/ipc-handlers.ts
@@ -736,6 +736,7 @@ export async function loadThemeDetails(
 			await server.persistThemeDetails();
 			await server.updateCachedThumbnail();
 		}
+		throw new Error( 'test' );
 		const thumbnailPath = getSiteThumbnailPath( id );
 		const thumbnailData = await getImageData( thumbnailPath );
 		sendIpcEventToRendererWithWindow( parentWindow, 'thumbnail-loaded', {

2. Create a new site
3. "Preview unavailable" should be displayed (not a broken image icon or stuck loading)

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[gcsecsey]

Thanks @ivan-ottinger for tackling this, changes LGTM and work well!

Starting a new site:

CleanShot.2026-01-27.at.14.57.25.mp4

Updating theme:

CleanShot.2026-01-27.at.14.57.52.mp4

Simulating an error:

CleanShot.2026-01-27.at.14.59.11.mp4

[epeicher]

Thanks @ivan-ottinger! I have tested it, and I can consistently see the preview generated successfully, I can also see the error as expected. LGTM!

CleanShot.2026-01-27.at.15.56.25.mp4

Error: