Delay PortalWrapper content render

[jakubjanczyk]

Problem/Feature

We've started using Preact in Beacon Embed for lighter bundle size and better performance. It's in most part compatible with React, so a lot of things work the same. However, there apparently is one difference we've noticed. If there is a Portal created from within another Portal, the rendering to the DOM is very "transactional", meaning that some intermediate states are not being flushed to the DOM. In our case the issue is with Animate component, and the fact that intermediate entering state is not rendered, but it goes straight to rendering entered state. Because of that animations are not working - there is not change to the styles as seen from the DOM/browser perspective.

I am not 100% sure what is the exact issue, it might be some combination of Animate, PortalWrapper and Modal. However, the solution I have found that is working is to delay a bit the rendering of the content of PortalWrapper, by adding additional state element, and setting it to true when isOpen is changed to true as well. I am not setting it back to false when modal is closed, because there seems to be some error related to this showing up in application, that I cannot locate the source for, but we don't need to change this flag at this point.

I've put this behind a prop flag, so that it doesn't break any existing Modal usages outside of Beacon (and all Beacon Modals would be given this flag). That's mostly because that are some callback available on Modal that might rely on content to be rendered immediately.

Testing

This can be of course tested by opening storybook and making sure Modals are working correctly :)

However, proper testing of the issue cannot be really done in this repo, only when using Beacon :( We'll do this in separate PR.

Write to your heart's content, include:

• [ ] A link to the Figma design in your story (list regularly updated here)
• [ ] A link to the Story(ies) in the description
• [ ] Is there a Jira ticket associated?
• [ ] If useful, add screenshots or videos
• [ ] If useful (and unclear), add a little explanation of why a certain path was taken
• [ ] Instructions on how to test
• [ ] Found any restrictions/limitations? Let us know!

Guidelines

Make sure the pull request:

• [ ] Follows the established folder/file structure
• [ ] Adds unit tests
• [ ] If it is a refactor or change to an existing component, have you verified it won't break existing Cypress tests or have you updated them?
• [ ] Did you verify some accessibility (a11y) basics?
• [ ] Adds/updates stories. Guidelines
• [ ] Adds/updates documentation (ie proptypes) Guidelines
• [ ] Has it been tested in Help Scout's supported browsers?
• [ ] Requests review from designer of the feature
• [ ] Add label (bug? feature?)

[jakubjanczyk]

@plbabin @tinkertrain This is a bit hacky, but I have not found another way to fix the issue for Beacon. I know Modal is a bit in deprecation state (to be replaced with SimpleModal), but it's really hard to get rid of it from Beacon code and we don't have capacity for it now :smile: I suspect the issue we have would not be present in SimpleModal, but maybe one day we'll replace it (I'd love to because it much lighter).

Since this repo is open, I don't want to put links to Beacon preview to show you the issue and fixed version, but please let me know in case you'd want it, I'll share on slack :)