[MenuBar] Optimize MenuBar Performance in TreeGrid with Large Datasets

[JustinVoitel]

Describe your motivation

We are currently using a single Button MenuBar with 10+ menu items, including sub-items, within a TreeGrid containing 50+ grid items. For some items, the MenuBar needs to perform a small calculation to determine the label (e.g., Menu > Download as > PDF (54 of 102)). This does not need more than 10ms per menu item...

But as more grid items are introduced, I’ve noticed a significant increase in initialization time. After debugging, it appears that the root cause of the delay is the MenuBar. Specifically, each grid item has its own MenuBar, and these are all built when the grid is initialized, which accumulates and leads to noticeable performance degradation.

Describe the solution you'd like

It would be helpful to optimize the MenuBar initialization process, particularly when used within components that handle large datasets like TreeGrid.

One possible approach could be Lazy loading or deferring the creation of MenuBars until user interaction occurs (e.g., when the button is clicked).

We would greatly appreciate any improvements or suggestions that could enhance performance in these scenarios.

Describe alternatives you've considered

• Stop using the MenuBar in our grid, which would be a deficit for our users
• Using a different MenuBar implementation
• lazy loading the grid, but even this leads to noticable delay and scrolling is also affected by this

Additional context

This functionality would only be needed in flow since most item clicks depend on further java calculations. Also this should be easily configurable, e.g something like this:

menu.setLazy(true)
//or
menu.setItemsLazy(true)

[knoobie]

How are you building / adding your menu bar? Component column or lit template? If it's the first: use the second

[JustinVoitel]

@knoobie Thank you for the Tipp I'll try out LitRenderers!