Performance issues with a multiple Menu components in Drawer

[imMatheus]

Description

Improving perfomance when multiple <Menu/> items are displayed inside a <Drawer/> as it currently staggers the animation

Problem Statement/Justification

I have a case at work we are using the <Drawer /> component to nicely show a list of saved reports and each row for a report has a context menu with actions to perform on the report. But the context menus slows down the drawer. Its not a massive issue and most of the time when you only have under 50 reports its not really noticeable, but ones you start going up in the number of reports you definitely start to feel it.

Here is a link to reproduce the issue https://codesandbox.io/p/sandbox/chakra-ui-drawer-menu-perfomance-issues-k6l6mc. I have 1000 rows here just to overexadurated the issue, but even with 200 or so, I can feel it and with a slower computer its even more noticeable.

This might not need a real fix in chakras code, maybe there is a way to make this performant with the tools that chakra gives atm and if so I would love to use those tools 🙏 Im more than open for suggestions ☺️ But I have already added the isLazy and computePositionOnMount props to the Menu component which should help with performance and are helping (removing them makes it a lot worse, if i dont have them in my codesandbox example with 1000 rows it pretty much crashes on my computer), but i feel like it could be better. Also, removing the <MenuList/> item does not help so seems to be something with only the <Menu/> component

Im more than open for thoughts on how I maybe could do some quick improvements on end, but if this is an issue that would need some changes to chakra itself, I would love to help out and contribute with a PR (or at least try) ⭐️

Proposed Solution or API

My thought where the performance issue is coming from is that the <Menu/> does a lot of calculations when it moves in the drawer that slows it down, so if that could be skipped until only when its opened, that could help

Alternatives

Using the isLazy and computePositionOnMount props on the <Menu /> component and it did help, but not fully (as explained in the Problem Statement/Justification section above)

Additional Information

Link to reproduce https://codesandbox.io/p/sandbox/chakra-ui-drawer-menu-perfomance-issues-k6l6mc