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/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';