From 0a13bb5cd39c518e9754e71c854c7abce0b67846 Mon Sep 17 00:00:00 2001
From: SaurabhJain708 <saurabhanchal381@gmail.com>
Date: Mon, 15 Sep 2025 18:25:13 +0530
Subject: [PATCH 1/6] WIP: Applied initial lazy loading basic strategy

---
 .../components/MergePreviewTab.tsx            | 26 ++++++++++------
 .../components/MergeRecordTab.tsx             | 26 ++++++++++------
 .../components/RecordShowContainer.tsx        | 30 ++++++++++++-------
 ...kflowRunOpeningInCommandMenuSideEffects.ts |  7 +++--
 4 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
index 7c9771f8f4d6f..501467899dfae 100644
--- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
@@ -1,8 +1,14 @@
 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';
+
+const LazyFieldCard = React.lazy(() =>
+  import('@/object-record/record-show/components/CardComponents').then(
+    (mod) => ({ default: mod.CardComponents.FieldCard }),
+  ),
+);
 
 type MergePreviewTabProps = {
   objectNameSingular: string;
@@ -29,14 +35,16 @@ export const MergePreviewTab = ({
         isInRightDrawer={true}
       />
 
-      <CardComponents.FieldCard
-        targetableObject={{
-          targetObjectNameSingular: objectNameSingular,
-          id: recordId,
-        }}
-        showDuplicatesSection={false}
-        isInRightDrawer={true}
-      />
+      <Suspense fallback={<div>Loading card...</div>}>
+        <LazyFieldCard
+          targetableObject={{
+            targetObjectNameSingular: objectNameSingular,
+            id: recordId,
+          }}
+          showDuplicatesSection={false}
+          isInRightDrawer={true}
+        />
+      </Suspense>
     </Section>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
index a30f3b794c04e..7f026287664b1 100644
--- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
@@ -1,6 +1,12 @@
-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';
+
+const LazyFieldCard = React.lazy(() =>
+  import('@/object-record/record-show/components/CardComponents').then(
+    (mod) => ({ default: mod.CardComponents.FieldCard }),
+  ),
+);
 
 type MergeRecordTabProps = {
   isInRightDrawer?: boolean;
@@ -20,14 +26,16 @@ export const MergeRecordTab = ({
         isInRightDrawer={true}
       />
 
-      <CardComponents.FieldCard
-        targetableObject={{
-          targetObjectNameSingular: objectNameSingular,
-          id: recordId,
-        }}
-        isInRightDrawer={true}
-        showDuplicatesSection={false}
-      />
+      <Suspense fallback={<div>Loading...</div>}>
+        <LazyFieldCard
+          targetableObject={{
+            targetObjectNameSingular: objectNameSingular,
+            id: recordId,
+          }}
+          isInRightDrawer={true}
+          showDuplicatesSection={false}
+        />
+      </Suspense>
     </Section>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index 04819d4421a39..b737eda9fa6ab 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -9,9 +9,15 @@ 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';
+
+const LazyShowPageSubContainer = React.lazy(() =>
+  import('@/ui/layout/show-page/components/ShowPageSubContainer').then(
+    (mod) => ({ default: mod.ShowPageSubContainer }),
+  ),
+);
 
 const StyledShowPageBannerContainer = styled.div`
   z-index: 1;
@@ -67,16 +73,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={<div>Loading page...</div>}>
+          <LazyShowPageSubContainer
+            tabs={tabs}
+            layout={layout}
+            targetableObject={{
+              id: objectRecordId,
+              targetObjectNameSingular: objectMetadataItem?.nameSingular,
+            }}
+            isInRightDrawer={isInRightDrawer}
+            loading={isPrefetchLoading || loading || recordLoading}
+          />
+        </Suspense>
       </ShowPageContainer>
     </RightDrawerProvider>
   );
diff --git a/packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects.ts b/packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects.ts
index 0c9343ea77c83..7b82e234956e6 100644
--- a/packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects.ts
+++ b/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,

From f11a51a43039c644ae2271ef424672e523da4e63 Mon Sep 17 00:00:00 2001
From: SaurabhJain708 <saurabhanchal381@gmail.com>
Date: Tue, 23 Sep 2025 17:36:09 +0530
Subject: [PATCH 2/6] Added skeleton for recordshowcontainer

---
 .../components/RecordShowContainer.tsx        | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index b737eda9fa6ab..3781fca05538c 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -12,6 +12,7 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import React, { Suspense } from 'react';
+import Skeleton from 'react-loading-skeleton';
 
 const LazyShowPageSubContainer = React.lazy(() =>
   import('@/ui/layout/show-page/components/ShowPageSubContainer').then(
@@ -31,6 +32,30 @@ type RecordShowContainerProps = {
   isNewRightDrawerItemLoading?: boolean;
 };
 
+const StyledSkeletonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+`;
+
+const RecordShowSubcontainerSkeleton = () => {
+  return (
+    <StyledSkeletonWrapper>
+      <Skeleton height={28} width="35%" />
+
+      <div style={{ display: 'flex', gap: 12 }}>
+        <Skeleton height={32} width={70} />
+        <Skeleton height={32} width={70} />
+        <Skeleton height={32} width={70} />
+      </div>
+
+      <Skeleton height={160} width="100%" />
+      <Skeleton height={160} width="100%" />
+    </StyledSkeletonWrapper>
+  );
+};
+
 export const RecordShowContainer = ({
   objectNameSingular,
   objectRecordId,
@@ -73,7 +98,7 @@ export const RecordShowContainer = ({
         </StyledShowPageBannerContainer>
       )}
       <ShowPageContainer>
-        <Suspense fallback={<div>Loading page...</div>}>
+        <Suspense fallback={<RecordShowSubcontainerSkeleton />}>
           <LazyShowPageSubContainer
             tabs={tabs}
             layout={layout}

From a8fdc170eb35c3f54ab99645471890f551d5a0ef Mon Sep 17 00:00:00 2001
From: SaurabhJain708 <saurabhanchal381@gmail.com>
Date: Tue, 23 Sep 2025 17:47:23 +0530
Subject: [PATCH 3/6] Fixed skeleton theme

---
 .../components/RecordShowContainer.tsx        | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index 3781fca05538c..3864b42a7165b 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -12,7 +12,8 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import React, { Suspense } from 'react';
-import Skeleton from 'react-loading-skeleton';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { useTheme } from '@emotion/react';
 
 const LazyShowPageSubContainer = React.lazy(() =>
   import('@/ui/layout/show-page/components/ShowPageSubContainer').then(
@@ -32,26 +33,34 @@ type RecordShowContainerProps = {
   isNewRightDrawerItemLoading?: boolean;
 };
 
-const StyledSkeletonWrapper = styled.div`
+const StyledSkeletonWrapper = styled.div<{ theme: any }>`
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 16px;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(4)};
 `;
 
 const RecordShowSubcontainerSkeleton = () => {
+  const theme = useTheme();
+
   return (
-    <StyledSkeletonWrapper>
-      <Skeleton height={28} width="35%" />
+    <StyledSkeletonWrapper theme={theme}>
+      <SkeletonTheme
+        baseColor={theme.background.tertiary}
+        highlightColor={theme.background.transparent.lighter}
+        borderRadius={theme.border.radius.sm}
+      >
+        <Skeleton height={28} width="35%" />
 
-      <div style={{ display: 'flex', gap: 12 }}>
-        <Skeleton height={32} width={70} />
-        <Skeleton height={32} width={70} />
-        <Skeleton height={32} width={70} />
-      </div>
+        <div style={{ display: 'flex', gap: theme.spacing(3) }}>
+          <Skeleton height={32} width={70} />
+          <Skeleton height={32} width={70} />
+          <Skeleton height={32} width={70} />
+        </div>
 
-      <Skeleton height={160} width="100%" />
-      <Skeleton height={160} width="100%" />
+        <Skeleton height={160} width="100%" />
+        <Skeleton height={160} width="100%" />
+      </SkeletonTheme>
     </StyledSkeletonWrapper>
   );
 };

From 0ea2568e901248cbd0f9c6f3214e90cb42b04ca6 Mon Sep 17 00:00:00 2001
From: SaurabhJain708 <saurabhanchal381@gmail.com>
Date: Tue, 23 Sep 2025 18:13:46 +0530
Subject: [PATCH 4/6] Added skeletons for all lazy imports

---
 .../components/MergePreviewTab.tsx            |  3 +-
 .../components/MergeRecordTab.tsx             |  3 +-
 .../record-show/components/CardComponents.tsx | 28 ++++++++++++++++
 .../components/RecordShowContainer.tsx        | 33 ++++++++++++++-----
 4 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
index 501467899dfae..68e1abf86769c 100644
--- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
@@ -3,6 +3,7 @@ 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/CardComponents';
 
 const LazyFieldCard = React.lazy(() =>
   import('@/object-record/record-show/components/CardComponents').then(
@@ -35,7 +36,7 @@ export const MergePreviewTab = ({
         isInRightDrawer={true}
       />
 
-      <Suspense fallback={<div>Loading card...</div>}>
+      <Suspense fallback={<FieldCardSkeleton isInRightDrawer={true} />}>
         <LazyFieldCard
           targetableObject={{
             targetObjectNameSingular: objectNameSingular,
diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
index 7f026287664b1..a2e3f54a97307 100644
--- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
@@ -1,6 +1,7 @@
 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/CardComponents';
 
 const LazyFieldCard = React.lazy(() =>
   import('@/object-record/record-show/components/CardComponents').then(
@@ -26,7 +27,7 @@ export const MergeRecordTab = ({
         isInRightDrawer={true}
       />
 
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<FieldCardSkeleton isInRightDrawer={true} />}>
         <LazyFieldCard
           targetableObject={{
             targetObjectNameSingular: objectNameSingular,
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
index bdcac6d7b49b5..73419020e95e7 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
@@ -78,6 +78,34 @@ const LoadingSkeleton = () => {
   );
 };
 
+export const FieldCardSkeleton = ({
+  isInRightDrawer,
+}: {
+  isInRightDrawer?: boolean;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <StyledGreyBox 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>
+    </StyledGreyBox>
+  );
+};
+
 const WorkflowVisualizer = lazy(() =>
   import('@/workflow/workflow-diagram/components/WorkflowVisualizer').then(
     (module) => ({
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index 3864b42a7165b..37c62ce41566d 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -14,6 +14,7 @@ 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(
@@ -50,16 +51,32 @@ const RecordShowSubcontainerSkeleton = () => {
         highlightColor={theme.background.transparent.lighter}
         borderRadius={theme.border.radius.sm}
       >
-        <Skeleton height={28} width="35%" />
-
+        <Skeleton
+          height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
+          width="35%"
+        />
         <div style={{ display: 'flex', gap: theme.spacing(3) }}>
-          <Skeleton height={32} width={70} />
-          <Skeleton height={32} width={70} />
-          <Skeleton height={32} width={70} />
+          <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={160} width="100%" />
-        <Skeleton height={160} width="100%" />
+        <Skeleton
+          height={SKELETON_LOADER_HEIGHT_SIZES.columns.m}
+          width="100%"
+        />
+        <Skeleton
+          height={SKELETON_LOADER_HEIGHT_SIZES.columns.m}
+          width="100%"
+        />
       </SkeletonTheme>
     </StyledSkeletonWrapper>
   );

From f999155deeccfa5d1687bb6618936c2b12efe3aa Mon Sep 17 00:00:00 2001
From: SaurabhJain708 <saurabhanchal381@gmail.com>
Date: Wed, 1 Oct 2025 08:19:10 +0530
Subject: [PATCH 5/6] Fixed

---
 .../components/MergePreviewTab.tsx            |  3 +-
 .../components/MergeRecordTab.tsx             |  2 +-
 .../record-show/components/CardComponents.tsx | 28 ----------
 .../components/FieldCardSkeleton.tsx          | 52 +++++++++++++++++++
 4 files changed, 54 insertions(+), 31 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-show/components/FieldCardSkeleton.tsx

diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
index 68e1abf86769c..4e493268121c9 100644
--- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
@@ -3,7 +3,7 @@ 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/CardComponents';
+import { FieldCardSkeleton } from '@/object-record/record-show/components/FieldCardSkeleton';
 
 const LazyFieldCard = React.lazy(() =>
   import('@/object-record/record-show/components/CardComponents').then(
@@ -35,7 +35,6 @@ export const MergePreviewTab = ({
         objectRecordId={recordId}
         isInRightDrawer={true}
       />
-
       <Suspense fallback={<FieldCardSkeleton isInRightDrawer={true} />}>
         <LazyFieldCard
           targetableObject={{
diff --git a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
index a2e3f54a97307..6c7db3b255ce7 100644
--- a/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
@@ -1,7 +1,7 @@
 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/CardComponents';
+import { FieldCardSkeleton } from '@/object-record/record-show/components/FieldCardSkeleton';
 
 const LazyFieldCard = React.lazy(() =>
   import('@/object-record/record-show/components/CardComponents').then(
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
index 73419020e95e7..bdcac6d7b49b5 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
@@ -78,34 +78,6 @@ const LoadingSkeleton = () => {
   );
 };
 
-export const FieldCardSkeleton = ({
-  isInRightDrawer,
-}: {
-  isInRightDrawer?: boolean;
-}) => {
-  const theme = useTheme();
-
-  return (
-    <StyledGreyBox 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>
-    </StyledGreyBox>
-  );
-};
-
 const WorkflowVisualizer = lazy(() =>
   import('@/workflow/workflow-diagram/components/WorkflowVisualizer').then(
     (module) => ({
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/FieldCardSkeleton.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/FieldCardSkeleton.tsx
new file mode 100644
index 0000000000000..4964149e06afa
--- /dev/null
+++ b/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>
+  );
+};

From 4b02e7fa69fc3e7ff09fbb00a1595bf2421a3fbe Mon Sep 17 00:00:00 2001
From: SaurabhJain708 <saurabhanchal381@gmail.com>
Date: Wed, 1 Oct 2025 08:28:18 +0530
Subject: [PATCH 6/6] Fixed linting

---
 .../record-calendar/components/RecordCalendarAddNew.tsx          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx
index d2c5618c39396..13854ee91a0ae 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx
@@ -56,7 +56,6 @@ export const RecordCalendarAddNew = ({
     return null;
   }
 
-
   return (
     <StyledButton
       onClick={() => {