[Bug]: Interactive scene thumbnail (ThumbnailInteractive) reloads its iframe on every re-render
- Dominant language
- TypeScript
- Stars
- 37.7k
- Forks
- 5.9k
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 193
Description
## Summary
The scene-rail thumbnail for interactive scenes (`components/slide-renderer/components/ThumbnailInteractive/index.tsx`, iframe `title="Interactive Preview"`) re-creates and reloads its `` on every re-render / remount — re-parsing the HTML and re-running its scripts.
It is rendered from two separate component trees — the playback `scene-sidebar.tsx` and the shared `scene-thumbnail-content.tsx` (editor rail). On a Pro-mode toggle one tree unmounts and the other mounts, so the thumbnail iframe is a different element each time and reloads. Surfaced while verifying #619 (PR #629): an e2e MutationObserver saw `Interactive Preview` added three times across two mode/scene transitions, while the playback iframe (now keep-alive) stayed put.
## Why this was split out of #619
This is a **stateless preview**: it is lazy-loaded, `pointer-events: none`, scaled down, and holds no user state — so a reload only costs a flicker + wasted script execution, not lost state. It sits in an already-animating rail swap, so the flicker is largely invisible. #619 / PR #629 deliberately scoped to the playback scene iframe (where state loss is the actual bug).
## Fix options (both have downsides — needs a direction)
1. **Route thumbnails through the keep-alive pool** — wrong shape: a rail shows many thumbnails at once, so a small LRU pool would thrash, and keeping every thumbnail's iframe resident is the opposite of what a lazy preview wants.
2. **Render the thumbnail statically without scripts** (drop `allow-scripts`) — interactive widgets are typically JS-rendered (canvas/animation), so their previews would blank.
3. **Snapshot once to an image** — a real fix (render the widget once, cache a static image for the rail) but needs an html-to-image step / new dependency.
Low priority. Filing to track rather than block #629.
Contributor guide
Research direction
Read components/slide-renderer/components/ThumbnailInteractive/index.tsx alongside scene-sidebar.tsx and scene-thumbnail-content.tsx, then trace how the two component trees swap during Pro-mode and scene transitions. Compare the listed keep-alive, static, and image-snapshot approaches and determine which preserves lazy scripted previews without repeated iframe creation. Verify the chosen behavior with the e2e MutationObserver scenario described for #619.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100