Render post menu items lazily (take two)

gaearon commented 1 week ago

Resubmit of https://github.com/bluesky-social/social-app/pull/6437.

I broke dialogs in https://github.com/bluesky-social/social-app/pull/6437. We can't put dialogs inside the <Menu.Outer> conditionally rendered content because that would destroy their state and controls, and those need to be alive even after the dialog is closed.

Now I'm unreverting it but applying a few more fixes on top:

6b1640?w=1 applies a slightly different approach. The dialogs are placed outside of <Menu.Outer> so that they don't depend on the menu open/close state. However, the menu itself is not rendered until the first time you press the button. In other words, the menu is now initialized lazily.
In ac2959385e38027d903f1f8876d55aaa02fdf4c9, I move the new component to another file so that we can take advantage of lazy requires where it works.
Finally, f03a6c1dd7aa96c92933ad8fa207bc4f83209639 tweaks the implementation because useMenuControl only has isOpen for web and I can't figure out how to fix that. This new implementation is ugly but works cross-platform.

Test Plan

Verify the menu works. Verify the dialogs within the menu also work (unlike last time). Verify you can toggle the menu repeatedly. Refresh the page and verify that you can also toggle the menu (both once and repeatedly) using keyboard.

Do this on all platforms.

github-actions[bot] commented 1 week ago

Old size	New size	Diff
8.05 MB	8.05 MB	0 B (0.00%)

mozzius commented 6 days ago

Tested on all platforms, works well

bluesky-social / social-app

Render post menu items lazily (take two) #6473

Test Plan