Preview: white flash when navigating between dark-background pages (load new page off-screen, swap when ready)
- Dominant language
- JavaScript
- Stars
- 2
- Forks
- 3
- Avg merge
- 15m
- Merged PRs (30d)
- 6
Description
## Summary
When the currently-previewed page has a dark background and you open a different page for preview, there's a brief **flash of white** before the new page paints.
## Cause
The preview reuses a single `` and navigates it by setting `webview.src` (`showPreview` → `src/renderer/renderer.js:378`, webview created in `ensurePreviewWebview`, `:333`). During the load the webview shows its default white background until the new document's own background paints, so a dark→dark transition flashes white in between. (A cross-origin preview is worse: `ensurePreviewWebview` tears down and recreates the webview entirely.)
## Suggested fix — double-buffer the swap
Load the new page in a hidden/offscreen webview, wait for it to finish loading, then swap it in and remove the old one:
1. Create a second `` offscreen with the new `src`.
2. Wait for `did-finish-load` (or `did-stop-loading` / `dom-ready`) — there's already a `did-finish-load` listener pattern at `renderer.js:311`.
3. Swap the new webview into place and destroy the previous one (`destroyPreviewWebview`, `:261`).
This way the visible view only changes once the incoming page has rendered, so there's no intermediate blank frame.
## Smaller mitigations (optional / complementary)
- Set the webview's background color to a neutral/dark default (`background-color` CSS or the `` background) so any unavoidable gap is less jarring.
- Keep the old frame visible until the new one is ready rather than blanking on navigation.
The load-then-swap approach is the proper fix; the background-color tweak is a cheap partial mitigation.
## Acceptance criteria
- [ ] Navigating between two dark-background pages shows no white flash
- [ ] Works for both same-origin navigation and cross-origin preview swaps
Contributor guide
Research direction
Start in src/renderer/renderer.js at ensurePreviewWebview (:333), showPreview (:378), the did-finish-load listener pattern at :311, and destroyPreviewWebview (:261). Trace how same-origin navigation and cross-origin webview recreation currently work, then implement the load-then-swap flow. Done means dark-to-dark navigation has no white flash for either path and the previous webview is removed after the replacement is ready.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- desktop
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100