fix: resizing window causes 'ResizeObserver loop completed with undelivered notifications' error

[reidbarber]

Closes #7718

The error is likely due to how DOM changes triggered by the resize observer cause further resize events in the same frame. We can mitigate this by waiting until the next frame to apply the updates. This one may need a decent amount of manual regression testing.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

1. Open the RAC -> Popover Example story in it's own tab
2. Open the console and resize your window rapidly to cause the popover position to be updated
3. Verify that there is no ResizeObserver loop completed with undelivered notifications error in the console

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[snowystinger]

I did this a long time ago
#2891

Which we had to revert due to #4204

We'll have to check if the issue that caused us to revert it happens in this PR as well. There isn't a lot of info on what it was, might be good to go back and check some of our testing sheets if you can.

[reidbarber]

@snowystinger

Looked back and looks like tooltip positions were broken in chromatic, which led to #4202 (comment), which we reverted because the original bug was reintroduced.

[reidbarber]

@snowystinger not seeing anything noteworthy: https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=900

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[snowystinger]

@snowystinger not seeing anything noteworthy: https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=900

https://www.chromatic.com/test?appId=5f0dd5ad2b5fc10022a2e320&id=67aa8fee55d156ca20f02823
this one is new, it's not a flaky test

That said, it looks like the chromatic snapshot has been wrong, it shouldn't have been stacked vertically all this time. Let's see if we can find out more about what has happened there

[imkesin]

@snowystinger - How would we confirm that the chromatic snapshot is just wrong?

[snowystinger]

The name of the chromatic test is ButtonGroup: horizontal, but it was previously rendering it vertically, so it was definitely consistently wrong. I'm not sure when it changed, we can probably look back at previous snapshots and the commits they are associated with

[imkesin]

@reidbarber - Are you able to rebase this again? I'd like to see if that hits the same issue with ButtonGroup: horizontal.

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation

[imkesin]

I'm not seeing the new build up on Chromatic.

[atreidesend]

any updates on this, or known workarounds? we're starting to adopt react-aria-components internally and seeing this intermittently on things like the Menu component

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[devongovett]

Approving for testing. We may want to make this more granular though, e.g. moving the raf into the individual components that use resize observer instead of applying it globally. In theory, only the components that cause synchronous DOM updates to the target of the resize observer as a result of a resize event are affected by this, so we only need to delay those. One other downside to this is that it delays updates by 1 frame, so it could result in flickering potentially. But lets test this carefully first and see if we notice any regressions.

[yihuiliao]

approving for testing