Fix(virtual-core): Wrap ResizeObserver callbacks in window.requestAnimationFrame to avoid error

[samstronghammer]

This PR wraps the two ResizeObserver callbacks with a window.requestAnimationFrame so that the "ResizeObserver loop completed with undelivered notifications" error doesn't happen.

Problem: ResizeObserver callbacks throw errors if they aren't able to resolve fully when they are invoked. This can happen if the callbacks are called at an inopportune time for the main thread, resulting in callbacks being dropped and the "ResizeObserver loop completed with undelivered notifications" error. This varies depending on how and when the resizes happened, and what browser you're on. I've found that Firefox is particularly picky about this.

Solution: There are several suggested here. In my personal experience, window.requestAnimationFrame solves the problem pretty well. Wrapping the two callbacks in the ResizeObservers here resulted in the errors completely stopping for my use case.

[piecyk]

@samstronghammer most cases this error has no real effect, other than log in console what is annoying. Wrapping it with requestAnimationFrame would creates it's own issues.

[samstronghammer]

@piecyk How the error shows depends on your development environment, and is difficult to block otherwise. As seen here for folks doing react development with webpack, the page is completely covered with an error dialog every time this happens, making it difficult to use. This issue is critical to resolve for my workflow and I'm happy to put the time in to solve the issues you think requestAnimationFrame will cause. I haven't noticed any through regular use, do you have any ideas how to make a problematic behavior happen? Given that the callback is invoked when the screen is updating, I don't see how this could have a noticeable effect on the UX.

[piecyk]

Thanks for sharing more details, and I totally understand the impact this has on your workflow. I’ll try to debug the issue further and see if I can provide a workaround to minimize the problem, or use requestAnimationFrame, let see. I’ll keep you updated once I have more insights or a better approach.