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/display/icon/components/TablerIcons.ts

@@ -173,6 +173,7 @@ export {
   IconListCheck,
   IconListDetails,
   IconListNumbers,
+  IconLoader,
   IconLock,
   IconLockOpen,
   IconMail,
@@ -236,6 +237,7 @@ export {
   IconSquare,
   IconSquareKey,
   IconSquareRoundedCheck,
+  IconSquareRoundedX,
   IconTable,
   IconTag,
   IconTags,

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);

packages/twenty-ui/src/theme/constants/Animation.ts

@@ -3,6 +3,7 @@ export const ANIMATION = {
     instant: 0.075,
     fast: 0.15,
     normal: 0.3,
+    slow: 1.5,
   },
 };
 

packages/twenty-ui/src/utilities/animation/components/AnimatedCircleLoading.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import styled from '@emotion/styled';
+import { useTheme } from '@emotion/react';
+
+const StyledAnimatedContainer = styled(motion.div)`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+
+export const AnimatedCircleLoading = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const theme = useTheme();
+  return (
+    <StyledAnimatedContainer
+      initial={{ rotate: 0 }}
+      animate={{
+        rotate: 360,
+      }}
+      transition={{
+        repeat: Infinity,
+        duration: theme.animation.duration.slow,
+        ease: 'easeInOut',
+      }}
+    >
+      {children}
+    </StyledAnimatedContainer>
+  );
+};

packages/twenty-ui/src/utilities/animation/index.ts

@@ -4,3 +4,4 @@ export * from './components/AnimatedEaseInOut';
 export * from './components/AnimatedFadeOut';
 export * from './components/AnimatedTextWord';
 export * from './components/AnimatedTranslation';
+export * from './components/AnimatedCircleLoading';

packages/twenty-ui/src/utilities/index.ts

@@ -1,3 +1,4 @@
+export * from './animation/components/AnimatedCircleLoading';
 export * from './animation/components/AnimatedContainer';
 export * from './animation/components/AnimatedEaseIn';
 export * from './animation/components/AnimatedEaseInOut';