THU-MAIC / THU-MAIC/OpenMAIC

[Bug]: Interactive scene thumbnail (ThumbnailInteractive) reloads its iframe on every re-render

Open
#630 1 comment 0 reactions 0 assignees View on GitHub
bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.