mirror of
https://github.com/stack-auth/stack.git
synced 2026-07-06 21:02:52 +08:00
65362f3efb
## Problem
When switching themes in the email drafts/template editor, the preview
occasionally shows the loading spinner and then goes completely blank.
## Cause
`EmailPreview` remounts its preview subtree (and thus the `<iframe>`)
via a `key` on `EmailPreviewErrorBoundary` whenever the inputs that
affect the rendered output change. That key was built from the
template/theme TSX source + edit mode, but **omitted `themeId`**.
Switching only the selected theme changes `themeId` without changing the
source, so the key stayed the same. React then reused the existing
`<iframe>` element and merely mutated its `srcDoc` attribute in place.
Replacing `srcDoc` on a live sandboxed iframe is intermittently not
repainted by the browser, leaving a blank preview after the loading
state.
The old key also concatenated values without a separator, which could
collide.
## Fix
Include `themeId` (and `templateId` / `editableSource`) in the remount
key and build it with a collision-safe serialization. A theme switch now
remounts the preview subtree, so a fresh iframe is mounted and loads its
`srcDoc` reliably instead of mutating it in place. This also resets
stale error-boundary state when moving from a broken theme to a working
one.
Single-line, behavior-preserving change.
Link to Devin session:
https://app.devin.ai/sessions/b269b97b40db4015a8770f77a13c10ea
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Fixes a blank email preview when switching themes in the dashboard
editor by remounting the preview iframe. The preview now reliably
updates on theme changes and resets stale error state.
- **Bug Fixes**
- Updated `EmailPreviewErrorBoundary` key to include `themeId`,
`templateId`, `editableSource`, `editMode`, and debounced theme/template
TSX sources, serialized with JSON and joined with a null delimiter.
- Remounts the iframe on theme switch instead of mutating `srcDoc`,
preventing intermittent blank renders.
<sup>Written for commit
|
||
|---|---|---|
| .. | ||
| assistant-ui | ||
| commands | ||
| data-table | ||
| design-components | ||
| form-fields | ||
| pacifica | ||
| payments | ||
| rule-builder | ||
| stack-companion | ||
| ui | ||
| vibe-coding | ||
| walkthrough | ||
| app-square.tsx | ||
| app-store-entry.tsx | ||
| app-warning-modal.tsx | ||
| cmdk-commands.tsx | ||
| cmdk-search.tsx | ||
| code-block.tsx | ||
| confetti.tsx | ||
| copyable-text.tsx | ||
| country-code-select.tsx | ||
| dev-error-notifier.tsx | ||
| dialog-opener.tsx | ||
| editable-grid.tsx | ||
| editable-input.tsx | ||
| email-preview.tsx | ||
| email-theme-selector.tsx | ||
| email-verification-setting.tsx | ||
| entity-kpi-cards.tsx | ||
| env-keys.tsx | ||
| error-page.tsx | ||
| export-users-dialog.tsx | ||
| feedback-form.tsx | ||
| form-dialog.tsx | ||
| form-fields.tsx | ||
| hexclave-rebrand-modal.tsx | ||
| illustrated-info.tsx | ||
| inline-code.tsx | ||
| inline-save-discard.tsx | ||
| link.tsx | ||
| logo-upload.tsx | ||
| logo.tsx | ||
| metadata-editor.tsx | ||
| navbar.tsx | ||
| permission-field.tsx | ||
| project-card.tsx | ||
| project-switcher.tsx | ||
| project-transfer-confirm-view.tsx | ||
| project-users-metric.tsx | ||
| repeating-input.tsx | ||
| resizable-container.tsx | ||
| router.tsx | ||
| search-bar.tsx | ||
| settings.tsx | ||
| site-loading-indicator.tsx | ||
| smart-form.tsx | ||
| smart-image.tsx | ||
| stack-companion.tsx | ||
| stepper.tsx | ||
| streaming-code-viewer.tsx | ||
| stripe-wordmark.tsx | ||
| style-link.tsx | ||
| theme-toggle.tsx | ||
| user-dialog.tsx | ||
| user-dialogs.tsx | ||
| version-alerter.tsx | ||
