Serverless function follow up (#9924)

- remove asynchronous serverless function build
- build serverless function synchronously instead on activate workflow
or execute
- add a loader on workflow code step test tab test button
- add a new `ServerlessFunctionSyncStatus` `BUILDING`
- add a new route to build a serverless function draft version 
- delay artificially execution to avoid UI flashing



https://github.com/user-attachments/assets/8d958d9a-ef41-4261-999e-6ea374191e33

packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx

@@ -1,3 +1,4 @@
+import { Loader } from '@ui/feedback/loader/components/Loader';
 import { useTheme, css } from '@emotion/react';
 import Editor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { codeEditorTheme } from '@ui/input';
@@ -10,8 +11,30 @@ type CodeEditorProps = Omit<EditorProps, 'onChange'> & {
   onChange?: (value: string) => void;
   setMarkers?: (value: string) => editor.IMarkerData[];
   withHeader?: boolean;
+  isLoading?: boolean;
 };
 
+const StyledEditorLoader = styled.div<{
+  height: string | number;
+  withHeader?: boolean;
+}>`
+  align-items: center;
+  display: flex;
+  height: ${({ height }) => height}px;
+  justify-content: center;
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  ${({ withHeader, theme }) =>
+    withHeader
+      ? css`
+          border-radius: 0 0 ${theme.border.radius.sm} ${theme.border.radius.sm};
+          border-top: none;
+        `
+      : css`
+          border-radius: ${theme.border.radius.sm};
+        `}
+`;
+
 const StyledEditor = styled(Editor)<{ withHeader: boolean }>`
   .monaco-editor {
     border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -42,6 +65,7 @@ export const CodeEditor = ({
   onValidate,
   height = 450,
   withHeader = false,
+  isLoading = false,
   options,
 }: CodeEditorProps) => {
   const theme = useTheme();
@@ -64,12 +88,17 @@ export const CodeEditor = ({
     }
   };
 
-  return (
+  return isLoading ? (
+    <StyledEditorLoader height={height} withHeader={withHeader}>
+      <Loader />
+    </StyledEditorLoader>
+  ) : (
     <StyledEditor
       height={height}
       withHeader={withHeader}
-      value={value}
+      value={isLoading ? '' : value}
       language={language}
+      loading=""
       onMount={(editor, monaco) => {
         setMonaco(monaco);
         setEditor(editor);