Automattic / Automattic/jetpack

GIF Block: Smoother image swapping in editor

Open
#11,850 0 comments 0 reactions 1 assignee Claimed by @sirreal View on GitHub
[Block] GIF [Focus] Blocks [Pri] Low Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

When GIFs are swapped in the editor, there is a white flash that is jarring:

![example](https://user-images.githubusercontent.com/841763/51737747-a0194900-208d-11e9-82d9-b4d074a8e71d.gif)

Smooth out this experience. Noted: https://github.com/Automattic/wp-calypso/pull/30402#discussion_r250910439

cc: @thomasguillot @jeffersonrabb

Ideas:
- Is it smoother if we don't use iframes and avoid loading different documents? Even with images that should be cached, there's always a flash
- Use multi-step transition with 2 iframes. This is much more complex than swapping an attibute on the iframe. Would look something like:
1. On search
1. Load 2nd iframe opacity 0 iframe over the current iframe
1. Use the new iframe's onload event to trigger a transition to opacity 1
1. Remove the old iframe when transition is complete

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.