Improve lazy loading (#12393)

Creating manual chunk was a bad idea, we should always solve lazy
loading problem at the source instance.

Setting a 4.5MB for the index bundle size, CI will fail if we go above.

There is still a lot of room for optimizations!
- More agressive lazy loading (e.g. xyflow and tiptap are still loaded
in index!)
- Add a  prefetch mechanism
- Add stronger CI checks to make sure libraries we've set asides are not
added back
- Fix AllIcons component with does not work as intended (loaded on
initial load)

packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx

@@ -1,9 +1,18 @@
-import { ActivityRichTextEditor } from '@/activities/components/ActivityRichTextEditor';
+import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { lazy, Suspense } from 'react';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useRecoilValue } from 'recoil';
 import { viewableRichTextComponentState } from '../states/viewableRichTextComponentState';
 
+const ActivityRichTextEditor = lazy(() =>
+  import('@/activities/components/ActivityRichTextEditor').then((module) => ({
+    default: module.ActivityRichTextEditor,
+  })),
+);
+
 const StyledContainer = styled.div`
   box-sizing: border-box;
   margin: ${({ theme }) => theme.spacing(4)} ${({ theme }) => theme.spacing(-2)};
@@ -11,6 +20,20 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
+const LoadingSkeleton = () => {
+  const theme = useTheme();
+
+  return (
+    <SkeletonTheme
+      baseColor={theme.background.tertiary}
+      highlightColor={theme.background.transparent.lighter}
+      borderRadius={theme.border.radius.sm}
+    >
+      <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
+    </SkeletonTheme>
+  );
+};
+
 export const CommandMenuEditRichTextPage = () => {
   const { activityId, activityObjectNameSingular } = useRecoilValue(
     viewableRichTextComponentState,
@@ -27,10 +50,12 @@ export const CommandMenuEditRichTextPage = () => {
 
   return (
     <StyledContainer>
-      <ActivityRichTextEditor
-        activityId={activityId}
-        activityObjectNameSingular={activityObjectNameSingular}
-      />
+      <Suspense fallback={<LoadingSkeleton />}>
+        <ActivityRichTextEditor
+          activityId={activityId}
+          activityObjectNameSingular={activityObjectNameSingular}
+        />
+      </Suspense>
     </StyledContainer>
   );
 };