Skip to content

Fix site thumbnail not displaying correctly for newly created sites#3028

Merged
fredrikekelund merged 3 commits intotrunkfrom
stu-1541-fix-newly-created-site-screenshot
Apr 10, 2026
Merged

Fix site thumbnail not displaying correctly for newly created sites#3028
fredrikekelund merged 3 commits intotrunkfrom
stu-1541-fix-newly-created-site-screenshot

Conversation

@fredrikekelund
Copy link
Copy Markdown
Contributor

@fredrikekelund fredrikekelund commented Apr 9, 2026

Related issues

How AI was used in this PR

To help quickly implement a fix after I had diagnosed the issue.

Proposed Changes

Since #2850, Studio generates site thumbnails much more frequently. This leads to a race condition when creating a new site, causing Studio to display Preview unavailable instead of the site thumbnail. This PR fixes that.

More details: when the thumbnailData value changes rapidly in ContentTabOverview, the first base64-encoded image doesn't have time to load before the value changes again. This triggers an error event, which removes the <img> from the DOM and replaces it with the text Preview unavailable. When the <img> isn't in the DOM, it doesn't load, and so subsequent thumbnailData changes never make the image appear.

This PR fixes the issue by simply resetting the isThumbnailError state whenever thumbnailData changes.

Testing Instructions

  1. npm start
  2. Create a new site
  3. Ensure that the site thumbnail displays correctly

Pre-merge Checklist

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

@fredrikekelund fredrikekelund requested a review from a team April 9, 2026 13:24
@fredrikekelund fredrikekelund self-assigned this Apr 9, 2026
@wpmobilebot
Copy link
Copy Markdown
Collaborator

wpmobilebot commented Apr 9, 2026

📊 Performance Test Results

Comparing 42cba69 vs trunk

app-size

Metric trunk 42cba69 Diff Change
App Size (Mac) 1285.76 MB 1275.91 MB 9.85 MB 🟢 -0.8%

site-editor

Metric trunk 42cba69 Diff Change
load 1885 ms 1911 ms +26 ms ⚪ 0.0%

site-startup

Metric trunk 42cba69 Diff Change
siteCreation 9139 ms 9123 ms 16 ms ⚪ 0.0%
siteStartup 4955 ms 4949 ms 6 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

@katinthehatsite
Copy link
Copy Markdown
Contributor

Just a sidenote: it seems that there is a wrong Linear issue linked in the PR description.

Copy link
Copy Markdown
Contributor

@katinthehatsite katinthehatsite left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, what I am seeing on my end is a brief flash of Preview unavailable and then the preview appears:

Screen.Recording.2026-04-10.at.10.14.06.AM.mov

I am wondering if we could make the loading state persist until it loads completely. If there is no straightforward solution, we could merge then as it is anyway an improvement in user experience

@fredrikekelund
Copy link
Copy Markdown
Contributor Author

it seems that there is a wrong Linear issue linked in the PR description.

Updated 👍

what I am seeing on my end is a brief flash of Preview unavailable and then the preview appears

Hmm… I'll take a look. I'm sure we can find a relatively simple solution.

Comment on lines -69 to -71
if ( running ) {
void captureSiteThumbnail( siteId, false );
}
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change fixes the issue you identified in #3028 (review), @katinthehatsite. We don't need to capture screenshots for every UPDATED site event – it's enough to do it on CREATED events.

Studio already triggers a new screenshot capture when the window is re-focused and when starting a server.

Copy link
Copy Markdown
Contributor

@gcsecsey gcsecsey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on a fix for this @fredrikekelund! 🙌

With the most recent changes, I see no flickering and the thumbnails are displaying as described. 👍

CleanShot.2026-04-10.at.15.16.34.mp4

@fredrikekelund fredrikekelund enabled auto-merge (squash) April 10, 2026 14:19
@fredrikekelund fredrikekelund merged commit f75d2fa into trunk Apr 10, 2026
12 checks passed
@fredrikekelund fredrikekelund deleted the stu-1541-fix-newly-created-site-screenshot branch April 10, 2026 14:46
katinthehatsite pushed a commit that referenced this pull request Apr 13, 2026
…3028)

* Fix error/load race condition for site screenshots

* Revert styling changes

* Stop capturing screenshots on every UPDATED site-event
katinthehatsite added a commit that referenced this pull request Apr 13, 2026
* [skip ci] Code freeze: Update translatable strings for 1.7.8

* [skip ci] Code freeze: Add draft release notes for 1.7.8

* Add push/pull/import/export MCP tools for AI agents (#3022)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Sort studio code commands and subcommands alphabetically (#3027)

* Moved the `code` command registration in `apps/cli/index.ts` so that top-level CLI commands appear in alphabetical order

* Strip unnecessary fields in wpcom_request response (#3005)

* Strip bloated plan.features from wpcom_request responses

The WP.com /sites/{id} endpoint returns a plan object whose features
sub-field alone is 60K+ characters, pushing the total response past
Claude Code's ~100K character MCP tool result limit. The agent only
needs product_slug, is_free, and expired to gate features, since the
system prompt hardcodes what each plan tier can and can't do. Strip
plan.features and keep only essential plan properties.

* Also compact large array responses by stripping content and _links

List endpoints like GET /templates can return 80K+ chars of block markup.
Strip content and _links from array items when the response exceeds 80K
chars — the agent can still identify items by slug/title and fetch
individual ones for full content.

* Add _fields prompt guidance and scope plan compaction as special case

Add system prompt hint instructing the agent to use _fields on wp/v2
listing endpoints to minimize response sizes. Scope compactResponse()
to only handle plan.features stripping with a clear comment that this
is a special case (the API doesn't support sub-field filtering). Remove
the generic array compaction in favor of prompt-driven field selection.

* Add fields guidance for v1.1, rename stripOversizedFields

Update system prompt to instruct the agent to use fields (v1.1) and
_fields (wp/v2) to minimize response sizes, always including ID for
v1.1 requests. Rename compactResponse to stripOversizedFields for
clarity.

* Remove indentation in JSON to save tokens

* Fix dark mode visibility for error/success text in site list (#3034)

* Fix dark mode onbiarding screen (#3025)

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* Studio: Filter out deprecated warnings from fatal errors (#3018)

* Filter out deprecated warnings from fatal errors

* Ensure our error filtering approach is consistent with CLI

* Apply changes to default exporter

* Fix unit tests

---------

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* [skip ci] Update translations

* [skip ci] Bump version to 1.7.8-beta1

* CLI: ensure Studio root exists before starting code agent (#3039)

* Ensure startAiAgent() checks whether ~/Studio exists before launching the Claude SDK.

* Define a localeData type to fix lint error: The inferred type of this
node exceeds the maximum length the compiler will serialize. An explicit
type annotation is needed. (ts 7056)

* [skip ci] Bump version to 1.7.8-beta2

* Update illustration colors and add dot grid background (#3004)

* Update Sync and Preview illustrations with dark mode support and dot grid background

Rebuild the Sync tab illustration SVG with proper light/dark mode color switching.
Update the Preview tab browser chrome to use light colors in light mode.
Add an interactive DotGrid canvas component behind both illustrations with a
radial gradient mask for a clean fade effect.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Extract IllustrationGrid wrapper, use CSS tokens in SVGs, add tests

- Extract shared IllustrationGrid component (DotGrid + radial mask)
  used by both Sync and Preview tabs
- Replace hardcoded SVG colors with CSS custom properties
  (--color-frame-surface, --color-frame-bg, etc.) so illustrations
  adapt automatically to theme changes
- Scope SVG class names with short prefixes (sti-, sds-) to avoid
  collisions
- Add basic tests for DotGrid and IllustrationGrid components

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Mock DotGrid in sync tests to fix canvas error in jsdom

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Respect prefers-reduced-motion in DotGrid

When reduced motion is preferred, render a static grid with no intro
animation, hover repulsion, or click ripples. Mouse event listeners
are not attached at all. The grid still responds to resize and color
scheme changes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Keep WP logo white in dark mode on blue browser, dedup resize logic

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Solve for strange sidebars

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com>
Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* Upgrade archiver to v7 to fix glob and inflight deprecation warnings (#3050)

* CLI: upgrade archiver to v7 to fix glob and inflight deprecation warnings

archiver@6 → archiver@7 pulls in archiver-utils@5 which uses glob@10
instead of glob@8, eliminating the glob and inflight deprecation warnings.

@types/archiver@7 dropped followSymlinks from CoreOptions (it's still
supported at runtime), so cast ArchiverOptions at call sites instead of
patching node_modules. Also fixes the broken ProgressData named import
which doesn't work with the export= module style in @types/archiver@7.

* Studio: upgrade archiver to v7, drop @types/archiver patch

Consistent with the CLI upgrade. Drops the @types+archiver+6.0.4 patch
in favour of the same cast-based approach used in apps/cli.

* Studio: remove obsolete archiver@6 runtime patch

* Studio: Fix sync info icon color in dark mode (#3053)

The info icons next to the push progress bar had no fill color class,
defaulting to black which is invisible on the dark background. Add
fill-frame-text-secondary to match the existing offline icon style.

* Update CLI README with GIF and import/export/push/pull (#3029)

* Update CLI README

* Tweaks

* More tweaks

* Tweak

* Wider

* Enforce minimum node version in the CLI (#3049)

* Enforce minimum node version in the CLI

* Tweaks

* Allow translations to load first

* Fix sidebar top padding on Windows (#3026)

* [skip ci] Update translations

* [skip ci] Bump version to 1.7.8-beta3

* Add Studio Code section to CLI README (#3059)

- Add a new "Studio Code" section to the CLI README introducing the AI agent feature
- Update the table of contents with a link to the new section
- Clarify existing AI agent integration bullet point to distinguish from Studio Code

* Fix white border around scrollbar in light mode (#3051)

* Bump actions/checkout from 4 to 6 (#3048)

Bumps [actions/checkout](https://github.com/actions/checkout) from 4 to 6.
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](actions/checkout@v4...v6)

---
updated-dependencies:
- dependency-name: actions/checkout
  dependency-version: '6'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Rename audit skill directory to match need-for-speed skill name (#3067)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Track more CLI bump stats (#3054)

* Track more CLI bump stats

- Monthly active users
- First launch
- Total launches
- Site creation

* Fix global definitions

* Fix types

* __ENABLE_CLI_TELEMETRY__

* Fix site thumbnail not displaying correctly for newly created sites (#3028)

* Fix error/load race condition for site screenshots

* Revert styling changes

* Stop capturing screenshots on every UPDATED site-event

* Add archiver patches back to fix following symlinks on export

* [skip ci] Bump version to 1.7.8-beta4

* Remove @types/archiver patches

The @types/archiver patches added followSymlinks to CoreOptions, but
this is unnecessary — ARCHIVER_OPTIONS in constants.ts uses plain object
inference so followSymlinks is never checked against CoreOptions. The CLI
patch also broke CI because install:bundle uses --omit=dev, meaning
@types/archiver is absent when patch-package runs.

* Remove @types/archiver patches and restore ArchiverOptions casts

The @types/archiver patches added followSymlinks to CoreOptions, but
@types/archiver@7 dropped followSymlinks from CoreOptions (it's still
supported at runtime). The CLI patch also broke CI because install:bundle
uses --omit=dev, meaning @types/archiver is absent when patch-package
runs. Restore the `as archiver.ArchiverOptions` casts at call sites.

* Remove unused @ts-expect-error from archive.ts

* Remove cast and explicitly silence TS error

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com>
Co-authored-by: Roberto Aranda <roberto.aranda@automattic.com>
Co-authored-by: Bernardo Cotrim <bmmcotrim@gmail.com>
Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com>
Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>
Co-authored-by: Jorge Costa <jorge.costa@developer.pt>
Co-authored-by: Antonio Sejas <antonio@sejas.es>
Co-authored-by: Shaun Andrews <shaun@automattic.com>
Co-authored-by: Wojtek Naruniec <wojtek.naruniec@automattic.com>
Co-authored-by: Gergely Csécsey <gergely.csecsey@automattic.com>
Co-authored-by: Fredrik Rombach Ekelund <fredrik@f26d.dev>
Co-authored-by: Volodymyr Makukha <nei.css@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Wojtek Naruniec <wojtek@naruniec.me>
katinthehatsite added a commit that referenced this pull request Apr 13, 2026
* [skip ci] Code freeze: Update translatable strings for 1.7.8

* [skip ci] Code freeze: Add draft release notes for 1.7.8

* Add push/pull/import/export MCP tools for AI agents (#3022)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Sort studio code commands and subcommands alphabetically (#3027)

* Moved the `code` command registration in `apps/cli/index.ts` so that top-level CLI commands appear in alphabetical order

* Strip unnecessary fields in wpcom_request response (#3005)

* Strip bloated plan.features from wpcom_request responses

The WP.com /sites/{id} endpoint returns a plan object whose features
sub-field alone is 60K+ characters, pushing the total response past
Claude Code's ~100K character MCP tool result limit. The agent only
needs product_slug, is_free, and expired to gate features, since the
system prompt hardcodes what each plan tier can and can't do. Strip
plan.features and keep only essential plan properties.

* Also compact large array responses by stripping content and _links

List endpoints like GET /templates can return 80K+ chars of block markup.
Strip content and _links from array items when the response exceeds 80K
chars — the agent can still identify items by slug/title and fetch
individual ones for full content.

* Add _fields prompt guidance and scope plan compaction as special case

Add system prompt hint instructing the agent to use _fields on wp/v2
listing endpoints to minimize response sizes. Scope compactResponse()
to only handle plan.features stripping with a clear comment that this
is a special case (the API doesn't support sub-field filtering). Remove
the generic array compaction in favor of prompt-driven field selection.

* Add fields guidance for v1.1, rename stripOversizedFields

Update system prompt to instruct the agent to use fields (v1.1) and
_fields (wp/v2) to minimize response sizes, always including ID for
v1.1 requests. Rename compactResponse to stripOversizedFields for
clarity.

* Remove indentation in JSON to save tokens

* Fix dark mode visibility for error/success text in site list (#3034)

* Fix dark mode onbiarding screen (#3025)

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* Studio: Filter out deprecated warnings from fatal errors (#3018)

* Filter out deprecated warnings from fatal errors

* Ensure our error filtering approach is consistent with CLI

* Apply changes to default exporter

* Fix unit tests

---------

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* [skip ci] Update translations

* [skip ci] Bump version to 1.7.8-beta1

* CLI: ensure Studio root exists before starting code agent (#3039)

* Ensure startAiAgent() checks whether ~/Studio exists before launching the Claude SDK.

* Define a localeData type to fix lint error: The inferred type of this
node exceeds the maximum length the compiler will serialize. An explicit
type annotation is needed. (ts 7056)

* [skip ci] Bump version to 1.7.8-beta2

* Update illustration colors and add dot grid background (#3004)

* Update Sync and Preview illustrations with dark mode support and dot grid background

Rebuild the Sync tab illustration SVG with proper light/dark mode color switching.
Update the Preview tab browser chrome to use light colors in light mode.
Add an interactive DotGrid canvas component behind both illustrations with a
radial gradient mask for a clean fade effect.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Extract IllustrationGrid wrapper, use CSS tokens in SVGs, add tests

- Extract shared IllustrationGrid component (DotGrid + radial mask)
  used by both Sync and Preview tabs
- Replace hardcoded SVG colors with CSS custom properties
  (--color-frame-surface, --color-frame-bg, etc.) so illustrations
  adapt automatically to theme changes
- Scope SVG class names with short prefixes (sti-, sds-) to avoid
  collisions
- Add basic tests for DotGrid and IllustrationGrid components

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Mock DotGrid in sync tests to fix canvas error in jsdom

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Respect prefers-reduced-motion in DotGrid

When reduced motion is preferred, render a static grid with no intro
animation, hover repulsion, or click ripples. Mouse event listeners
are not attached at all. The grid still responds to resize and color
scheme changes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Keep WP logo white in dark mode on blue browser, dedup resize logic

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Solve for strange sidebars

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com>
Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* Upgrade archiver to v7 to fix glob and inflight deprecation warnings (#3050)

* CLI: upgrade archiver to v7 to fix glob and inflight deprecation warnings

archiver@6 → archiver@7 pulls in archiver-utils@5 which uses glob@10
instead of glob@8, eliminating the glob and inflight deprecation warnings.

@types/archiver@7 dropped followSymlinks from CoreOptions (it's still
supported at runtime), so cast ArchiverOptions at call sites instead of
patching node_modules. Also fixes the broken ProgressData named import
which doesn't work with the export= module style in @types/archiver@7.

* Studio: upgrade archiver to v7, drop @types/archiver patch

Consistent with the CLI upgrade. Drops the @types+archiver+6.0.4 patch
in favour of the same cast-based approach used in apps/cli.

* Studio: remove obsolete archiver@6 runtime patch

* Studio: Fix sync info icon color in dark mode (#3053)

The info icons next to the push progress bar had no fill color class,
defaulting to black which is invisible on the dark background. Add
fill-frame-text-secondary to match the existing offline icon style.

* Update CLI README with GIF and import/export/push/pull (#3029)

* Update CLI README

* Tweaks

* More tweaks

* Tweak

* Wider

* Enforce minimum node version in the CLI (#3049)

* Enforce minimum node version in the CLI

* Tweaks

* Allow translations to load first

* Fix sidebar top padding on Windows (#3026)

* [skip ci] Update translations

* [skip ci] Bump version to 1.7.8-beta3

* Add Studio Code section to CLI README (#3059)

- Add a new "Studio Code" section to the CLI README introducing the AI agent feature
- Update the table of contents with a link to the new section
- Clarify existing AI agent integration bullet point to distinguish from Studio Code

* Fix white border around scrollbar in light mode (#3051)

* Bump actions/checkout from 4 to 6 (#3048)

Bumps [actions/checkout](https://github.com/actions/checkout) from 4 to 6.
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](actions/checkout@v4...v6)

---
updated-dependencies:
- dependency-name: actions/checkout
  dependency-version: '6'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Rename audit skill directory to match need-for-speed skill name (#3067)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Track more CLI bump stats (#3054)

* Track more CLI bump stats

- Monthly active users
- First launch
- Total launches
- Site creation

* Fix global definitions

* Fix types

* __ENABLE_CLI_TELEMETRY__

* Fix site thumbnail not displaying correctly for newly created sites (#3028)

* Fix error/load race condition for site screenshots

* Revert styling changes

* Stop capturing screenshots on every UPDATED site-event

* Add archiver patches back to fix following symlinks on export

* [skip ci] Bump version to 1.7.8-beta4

* Remove @types/archiver patches

The @types/archiver patches added followSymlinks to CoreOptions, but
this is unnecessary — ARCHIVER_OPTIONS in constants.ts uses plain object
inference so followSymlinks is never checked against CoreOptions. The CLI
patch also broke CI because install:bundle uses --omit=dev, meaning
@types/archiver is absent when patch-package runs.

* Remove @types/archiver patches and restore ArchiverOptions casts

The @types/archiver patches added followSymlinks to CoreOptions, but
@types/archiver@7 dropped followSymlinks from CoreOptions (it's still
supported at runtime). The CLI patch also broke CI because install:bundle
uses --omit=dev, meaning @types/archiver is absent when patch-package
runs. Restore the `as archiver.ArchiverOptions` casts at call sites.

* Remove cast and explicitly silence TS error

* Update release notes

* Adjust notes feedback

* [skip ci] Bump version to 1.7.8

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com>
Co-authored-by: Roberto Aranda <roberto.aranda@automattic.com>
Co-authored-by: Bernardo Cotrim <bmmcotrim@gmail.com>
Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com>
Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>
Co-authored-by: Jorge Costa <jorge.costa@developer.pt>
Co-authored-by: Antonio Sejas <antonio@sejas.es>
Co-authored-by: Shaun Andrews <shaun@automattic.com>
Co-authored-by: Wojtek Naruniec <wojtek.naruniec@automattic.com>
Co-authored-by: Gergely Csécsey <gergely.csecsey@automattic.com>
Co-authored-by: Fredrik Rombach Ekelund <fredrik@f26d.dev>
Co-authored-by: Volodymyr Makukha <nei.css@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Wojtek Naruniec <wojtek@naruniec.me>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants