chore(frontend): Lazy-load xyflow to reduce main chunk size

packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx

@@ -56,7 +56,6 @@ export const RecordCalendarAddNew = ({
     return null;
   }
 
-
   return (
     <StyledButton
       onClick={() => {

packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx

@@ -1,8 +1,15 @@
 import { useMergePreview } from '@/object-record/record-merge/hooks/useMergePreview';
-import { CardComponents } from '@/object-record/record-show/components/CardComponents';
 import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
 import { isDefined } from 'twenty-shared/utils';
 import { Section } from 'twenty-ui/layout';
+import React, { Suspense } from 'react';
+import { FieldCardSkeleton } from '@/object-record/record-show/components/FieldCardSkeleton';
+
+const LazyFieldCard = React.lazy(() =>
+  import('@/object-record/record-show/components/CardComponents').then(
+    (mod) => ({ default: mod.CardComponents.FieldCard }),
+  ),
+);
 
 type MergePreviewTabProps = {
   objectNameSingular: string;
@@ -28,15 +35,16 @@ export const MergePreviewTab = ({
         objectRecordId={recordId}
         isInRightDrawer={true}
       />
-
-      <CardComponents.FieldCard
-        targetableObject={{
-          targetObjectNameSingular: objectNameSingular,
-          id: recordId,
-        }}
-        showDuplicatesSection={false}
-        isInRightDrawer={true}
-      />
+      <Suspense fallback={<FieldCardSkeleton isInRightDrawer={true} />}>
+        <LazyFieldCard
+          targetableObject={{
+            targetObjectNameSingular: objectNameSingular,
+            id: recordId,
+          }}
+          showDuplicatesSection={false}
+          isInRightDrawer={true}
+        />
+      </Suspense>
     </Section>
   );
 };

packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx

@@ -1,6 +1,13 @@
-import { CardComponents } from '@/object-record/record-show/components/CardComponents';
 import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
 import { Section } from 'twenty-ui/layout';
+import React, { Suspense } from 'react';
+import { FieldCardSkeleton } from '@/object-record/record-show/components/FieldCardSkeleton';
+
+const LazyFieldCard = React.lazy(() =>
+  import('@/object-record/record-show/components/CardComponents').then(
+    (mod) => ({ default: mod.CardComponents.FieldCard }),
+  ),
+);
 
 type MergeRecordTabProps = {
   isInRightDrawer?: boolean;
@@ -20,14 +27,16 @@ export const MergeRecordTab = ({
         isInRightDrawer={true}
       />
 
-      <CardComponents.FieldCard
-        targetableObject={{
-          targetObjectNameSingular: objectNameSingular,
-          id: recordId,
-        }}
-        isInRightDrawer={true}
-        showDuplicatesSection={false}
-      />
+      <Suspense fallback={<FieldCardSkeleton isInRightDrawer={true} />}>
+        <LazyFieldCard
+          targetableObject={{
+            targetObjectNameSingular: objectNameSingular,
+            id: recordId,
+          }}
+          isInRightDrawer={true}
+          showDuplicatesSection={false}
+        />
+      </Suspense>
     </Section>
   );
 };

packages/twenty-front/src/modules/object-record/record-show/components/FieldCardSkeleton.tsx

@@ -0,0 +1,52 @@
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+
+const StyledSkeletonGreyBox = styled.div<{ isInRightDrawer?: boolean }>`
+  background: ${({ theme, isInRightDrawer }) =>
+    isInRightDrawer ? theme.background.secondary : ''};
+  border: ${({ isInRightDrawer, theme }) =>
+    isInRightDrawer ? `1px solid ${theme.border.color.medium}` : ''};
+  border-radius: ${({ isInRightDrawer, theme }) =>
+    isInRightDrawer ? theme.border.radius.md : ''};
+  height: ${({ isInRightDrawer }) => (isInRightDrawer ? 'auto' : '100%')};
+  margin: ${({ isInRightDrawer, theme }) =>
+    isInRightDrawer ? theme.spacing(4) : ''};
+`;
+const StyledLoadingSkeletonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: 100%;
+  padding: ${({ theme }) => theme.spacing(4)};
+  width: 100%;
+`;
+
+export const FieldCardSkeleton = ({
+  isInRightDrawer,
+}: {
+  isInRightDrawer?: boolean;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <StyledSkeletonGreyBox isInRightDrawer={isInRightDrawer}>
+      <StyledLoadingSkeletonContainer>
+        <SkeletonTheme
+          baseColor={theme.background.tertiary}
+          highlightColor={theme.background.transparent.lighter}
+          borderRadius={theme.border.radius.sm}
+        >
+          <Skeleton
+            height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
+            width="60%"
+          />
+          <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
+          <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
+          <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
+        </SkeletonTheme>
+      </StyledLoadingSkeletonContainer>
+    </StyledSkeletonGreyBox>
+  );
+};

packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx

@@ -9,9 +9,18 @@ import { RecordShowContainerContextStoreTargetedRecordsEffect } from '@/object-r
 import { useRecordShowContainerData } from '@/object-record/record-show/hooks/useRecordShowContainerData';
 import { useRecordShowContainerTabs } from '@/object-record/record-show/hooks/useRecordShowContainerTabs';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
-import { ShowPageSubContainer } from '@/ui/layout/show-page/components/ShowPageSubContainer';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import React, { Suspense } from 'react';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { useTheme } from '@emotion/react';
+import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+
+const LazyShowPageSubContainer = React.lazy(() =>
+  import('@/ui/layout/show-page/components/ShowPageSubContainer').then(
+    (mod) => ({ default: mod.ShowPageSubContainer }),
+  ),
+);
 
 const StyledShowPageBannerContainer = styled.div`
   z-index: 1;
@@ -25,6 +34,54 @@ type RecordShowContainerProps = {
   isNewRightDrawerItemLoading?: boolean;
 };
 
+const StyledSkeletonWrapper = styled.div<{ theme: any }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+
+const RecordShowSubcontainerSkeleton = () => {
+  const theme = useTheme();
+
+  return (
+    <StyledSkeletonWrapper theme={theme}>
+      <SkeletonTheme
+        baseColor={theme.background.tertiary}
+        highlightColor={theme.background.transparent.lighter}
+        borderRadius={theme.border.radius.sm}
+      >
+        <Skeleton
+          height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
+          width="35%"
+        />
+        <div style={{ display: 'flex', gap: theme.spacing(3) }}>
+          <Skeleton
+            height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
+            width={70}
+          />
+          <Skeleton
+            height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
+            width={70}
+          />
+          <Skeleton
+            height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
+            width={70}
+          />
+        </div>
+        <Skeleton
+          height={SKELETON_LOADER_HEIGHT_SIZES.columns.m}
+          width="100%"
+        />
+        <Skeleton
+          height={SKELETON_LOADER_HEIGHT_SIZES.columns.m}
+          width="100%"
+        />
+      </SkeletonTheme>
+    </StyledSkeletonWrapper>
+  );
+};
+
 export const RecordShowContainer = ({
   objectNameSingular,
   objectRecordId,
@@ -67,16 +124,18 @@ export const RecordShowContainer = ({
         </StyledShowPageBannerContainer>
       )}
       <ShowPageContainer>
-        <ShowPageSubContainer
-          tabs={tabs}
-          layout={layout}
-          targetableObject={{
-            id: objectRecordId,
-            targetObjectNameSingular: objectMetadataItem?.nameSingular,
-          }}
-          isInRightDrawer={isInRightDrawer}
-          loading={isPrefetchLoading || loading || recordLoading}
-        />
+        <Suspense fallback={<RecordShowSubcontainerSkeleton />}>
+          <LazyShowPageSubContainer
+            tabs={tabs}
+            layout={layout}
+            targetableObject={{
+              id: objectRecordId,
+              targetObjectNameSingular: objectMetadataItem?.nameSingular,
+            }}
+            isInRightDrawer={isInRightDrawer}
+            loading={isPrefetchLoading || loading || recordLoading}
+          />
+        </Suspense>
       </ShowPageContainer>
     </RightDrawerProvider>
   );

packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects.ts

@@ -12,7 +12,6 @@ import { type WorkflowRun } from '@/workflow/types/Workflow';
 import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
 import { workflowRunDiagramAutomaticallyOpenedStepsComponentState } from '@/workflow/workflow-diagram/states/workflowRunDiagramAutomaticallyOpenedStepsComponentState';
 import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
-import { generateWorkflowRunDiagram } from '@/workflow/workflow-diagram/utils/generateWorkflowRunDiagram';
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
@@ -27,7 +26,7 @@ export const useRunWorkflowRunOpeningInCommandMenuSideEffects = () => {
 
   const runWorkflowRunOpeningInCommandMenuSideEffects = useRecoilCallback(
     ({ snapshot, set }) =>
-      ({
+      async ({
         objectMetadataItem,
         recordId,
       }: {
@@ -52,6 +51,10 @@ export const useRunWorkflowRunOpeningInCommandMenuSideEffects = () => {
           return;
         }
 
+        const { generateWorkflowRunDiagram } = await import(
+          '@/workflow/workflow-diagram/utils/generateWorkflowRunDiagram'
+        );
+
         const { stepToOpenByDefault } = generateWorkflowRunDiagram({
           steps: workflowRunRecord.state.flow.steps,
           stepInfos: workflowRunRecord.state.stepInfos,