Add load listener to live preview component #38925
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR attempts to solve height issues that appear within live preview pattern components. It adds an event listener to the nested iFrame that will listen for
load
events that bubble up, and fire aresize
event to trigger a re-render (if the height/width have changed). There is also a 100msdebounce
wrapper.I couldn't find a comprehensive list of what fires the load event, but images are probably the main concern here. I know stylesheets (
link
tags) and other items also fire the event.Testing Instructions
I'm not confident in how to reproduce this as it seems to only happen to me on occasion. It happens enough though that I do have screenshots and video of it though. It's also happening to others on our team as well, so I suspect its common.
(maybe others can chime in if they've experienced this as well)
Screenshots
Example of it being cut off:
Component renders that occur before this PR + load events logged (
onLoad={console.log}
):This PR, showing the additional render after incoming load events
Types of changes
Enhancement
Checklist:
*.native.js
files for terms that need renaming or removal).