[FRONT COMPONENTS] Add loader to command menu items

[bosiraphael]

PR description

• Add a loader to the command menu items when the action is running.
• Add a new method closeSidePanel to the front component host api.

Video QA

CleanShot.2026-02-23.at.10.14.51.mp4

[greptile-apps]

Greptile Summary

Added loader to command menu items when headless front component actions are running, and introduced closeSidePanel API method. The implementation tracks mounted headless components via Recoil state to disable actions and show a loader while they're executing. However, the disabled prop is only passed to ActionListItem but not to ActionButton or ActionDropdownItem, meaning headless actions displayed as buttons or dropdown items won't show the loader.

Confidence Score: 4/5

• Safe to merge with minor inconsistency in disabled state handling across display modes
• The implementation is sound and well-structured, properly tracking component mount state and preventing duplicate actions. The new closeSidePanel API is correctly wired through all layers. However, there's an inconsistency where the disabled prop is only threaded to ActionListItem but not ActionButton or ActionDropdownItem, which could lead to incomplete UX if headless actions are used in those display modes
• ActionDisplay.tsx needs disabled prop passed to all display components for consistency

Important Files Changed

Filename	Overview
packages/twenty-front/src/modules/action-menu/actions/display/components/ActionListItem.tsx	Implements disabled state with early return in click handler, passes disabled prop to CommandMenuItem with loader on right
packages/twenty-front/src/modules/action-menu/actions/display/components/HeadlessFrontComponentAction.tsx	New component that prevents re-clicking headless actions while mounted, using Recoil selector to check mount status
packages/twenty-front/src/modules/command-menu-item/hooks/useCommandMenuItemFrontComponentActions.tsx	Updated to use HeadlessFrontComponentAction for headless components instead of generic Action
packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts	Added closeSidePanel method to API that calls closeCommandMenu

Sequence Diagram

sequenceDiagram
    participant User
    participant HeadlessFrontComponentAction
    participant Recoil as isHeadlessFrontComponentMountedFamilySelector
    participant ActionListItem
    participant CommandMenuItem
    participant FrontComponent
    participant SDK as closeSidePanel API

    User->>HeadlessFrontComponentAction: Click action
    HeadlessFrontComponentAction->>Recoil: Check isMounted
    alt Component already mounted
        Recoil-->>HeadlessFrontComponentAction: true
        HeadlessFrontComponentAction->>ActionListItem: disabled=true
        ActionListItem->>CommandMenuItem: Show Loader
        Note over User,CommandMenuItem: Action blocked, loader visible
    else Component not mounted
        Recoil-->>HeadlessFrontComponentAction: false
        HeadlessFrontComponentAction->>HeadlessFrontComponentAction: closeActionMenu()
        HeadlessFrontComponentAction->>FrontComponent: onClick() mount component
        FrontComponent->>SDK: Execute action
        SDK->>SDK: closeSidePanel() if needed
    end

Loading

_{Last reviewed commit: 211e383}

[greptile-apps]

_{12 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (2)

packages/twenty-front/src/modules/action-menu/actions/display/components/ActionDisplay.tsx
disabled prop not passed to ActionButton - headless actions in button display mode won't show loader

---

packages/twenty-front/src/modules/action-menu/actions/display/components/ActionDisplay.tsx
disabled prop not passed to ActionDropdownItem - headless actions in dropdown mode won't show loader

[cubic-dev-ai]

1 issue found across 12 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/twenty-front/src/modules/command-menu-item/hooks/useCommandMenuItemFrontComponentActions.tsx">

<violation number="1" location="packages/twenty-front/src/modules/command-menu-item/hooks/useCommandMenuItemFrontComponentActions.tsx:86">
P2: Non-headless command menu actions now use `Action` defaults, which closes the side panel on execution. If the intent is to preserve the previous behavior (no side-panel close for non-headless items), pass `closeSidePanelOnCommandMenuListActionExecution={false}` explicitly to avoid this regression.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Non-headless command menu actions now use Action defaults, which closes the side panel on execution. If the intent is to preserve the previous behavior (no side-panel close for non-headless items), pass closeSidePanelOnCommandMenuListActionExecution={false} explicitly to avoid this regression.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/command-menu-item/hooks/useCommandMenuItemFrontComponentActions.tsx, line 86:

<comment>Non-headless command menu actions now use `Action` defaults, which closes the side panel on execution. If the intent is to preserve the previous behavior (no side-panel close for non-headless items), pass `closeSidePanelOnCommandMenuListActionExecution={false}` explicitly to avoid this regression.</comment>

<file context>
@@ -76,11 +77,13 @@ const buildActionFromItem = ({
-        closeSidePanelOnCommandMenuListActionExecution={isHeadless}
       />
+    ) : (
+      <Action onClick={handleClick} />
     ),
   };
</file context>

Suggested change

	<Action onClick={handleClick} />
	<Action onClick={handleClick} closeSidePanelOnCommandMenuListActionExecution={false} />

[twenty-eng-sync]

Hey @bosiraphael! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!