Menu Popover slide transition looks inaccurate when popover is flipped

[phuoccss]

Provide a general summary of the issue here

Click the Menu button here when it's at bottom of the page https://react-aria.adobe.com/Menu#content. The transition looks wrong. It does not happen with Popover and Select.

🤔 Expected Behavior?

Slide transition works correctly.

😯 Current Behavior

Not sure. Seems like there's a delay when setting the data-placement attribute. When clicking the Menu button repeatedly, the slide transition looks accurate.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Follow official example.

Version

1.18

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Looks like it is present in our Spectrum 2 Menu as well, but strangely enough it doesn't reproduce if the trigger is extremely close to the bottom of the page. I'll have to dig some more, but bisecting to last December shows its been happening since then.

[reidbarber]

Looks like:

1. The enter animation starts when placement is available:

react-spectrum/packages/react-aria-components/src/Popover.tsx

Line 237 in 1e5a265

let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;

2. Menu builds its collection after the popover opens:

react-spectrum/packages/react-aria-components/src/Menu.tsx

Lines 300 to 302 in 1e5a265

	<CollectionBuilder content={<Collection {...props} />}>
	{collection => <MenuInner props={props} collection={collection} menuRef={ref} />}
	</CollectionBuilder>

3. Placement is computed before the menu reaches full height, then recalculated:

react-spectrum/packages/react-aria/src/overlays/useOverlayPosition.ts

Lines 317 to 321 in 1e5a265

	// Update position when the overlay changes size (might need to flip).
	useResizeObserver({
	ref: overlayRef,
	onResize: updatePosition
	});

Maybe we could have MenuTrigger pre-build the collection (like in Select/Combobox), pass it via context, and have the Menu use the pre-built one if available.