Improve context menu performance

[DePasqualeOrg]

When many files are loaded and an item toward the end of the list is right-clicked, a delay occurs (around 10 seconds with 100 files) before the context menu opens. The delay is position-dependent: the context menu opens nearly instantly when right-clicking items near the beginning of the list.

Cause

Each file list item had its own ContextMenu.Root component. When right-clicking, bits-ui iterates through all context menu instances to determine which one should handle the event.

Solution

Replace per-item context menus with a single shared context menu. Native contextmenu events capture the click position and set the menu's open state. A hidden anchor element positioned at the click coordinates is used with bits-ui's customAnchor prop to position the menu correctly.

Changes

• Add context-menu-state.svelte.ts - shared state for tracking clicked item and position
• Add FileListContextMenu.svelte - single shared context menu component
• Modify FileList.svelte - include the shared context menu
• Modify FileListNodeLabel.svelte - replace ContextMenu.Root with native oncontextmenu handler

Result

Context menu now opens instantly regardless of file count or item position.

[vcoppe]

Thank you for dedicating some time investigating and fixing this performance issue!
While I would gladly merge this after reviewing the code, I wonder if it's possible to improve this on bits-ui's side? It would probably be cleaner and would help all other projects that depend on it.

[vcoppe]

Maybe linked to this: huntabyte/bits-ui#1743 and huntabyte/bits-ui#1752

[DePasqualeOrg]

That's interesting. I'm not familiar with the internals of bits-ui, but it should in principle be possible to have much better performance with a long list of items with a context menu, so perhaps you're right and the fix should be made there rather than working around the issue here.

[vcoppe]

Which browser and device are you using? On my laptop, context menus open instantly even with 100 files

[DePasqualeOrg]

Try opening the last one in a list of 100. The ones near the top open nearly instantly, and the ones near the bottom take several seconds to open.

I'm using Safari on a MacBook Pro.