[FRONT COMPONENTS] Add loader to command menu items (#18165)

## 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


https://github.com/user-attachments/assets/c20b592a-6e4c-4cab-b5da-4cb2316acc7c
This commit is contained in:
Raphaël Bosi
2026-02-23 11:15:45 +01:00
committed by GitHub
parent 129d1ede86
commit 22bc3004b9
12 changed files with 117 additions and 5 deletions
@@ -6,6 +6,7 @@ import {
import { type AppPath } from 'twenty-shared/types';
import { currentUserState } from '@/auth/states/currentUserState';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
import { useUnmountHeadlessFrontComponent } from '@/front-components/hooks/useUnmountHeadlessFrontComponent';
@@ -26,6 +27,7 @@ export const useFrontComponentExecutionContext = ({
const setCommandMenuSearchState = useSetRecoilState(commandMenuSearchState);
const { getIcon } = useIcons();
const unmountHeadlessFrontComponent = useUnmountHeadlessFrontComponent();
const { closeCommandMenu } = useCommandMenu();
const navigate: FrontComponentHostCommunicationApi['navigate'] = async (
to,
@@ -63,11 +65,17 @@ export const useFrontComponentExecutionContext = ({
unmountHeadlessFrontComponent(frontComponentId);
};
const closeSidePanel: FrontComponentHostCommunicationApi['closeSidePanel'] =
async () => {
closeCommandMenu();
};
const frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi =
{
navigate,
openSidePanelPage,
unmountFrontComponent,
closeSidePanel,
};
return {