Feat: API Playground (#10376)

/claim #10283

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx

@@ -1,15 +1,44 @@
-import { ActivityRichTextEditor } from '@/activities/components/ActivityRichTextEditor';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+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';
 
+const ActivityRichTextEditor = lazy(() =>
+  import('@/activities/components/ActivityRichTextEditor').then((module) => ({
+    default: module.ActivityRichTextEditor,
+  })),
+);
+
 const StyledShowPageActivityContainer = styled.div`
   margin-top: ${({ theme }) => theme.spacing(6)};
   width: 100%;
 `;
+
+const StyledSkeletonContainer = styled.div`
+  width: 100%;
+`;
+
+const LoadingSkeleton = () => {
+  const theme = useTheme();
+
+  return (
+    <StyledSkeletonContainer>
+      <SkeletonTheme
+        baseColor={theme.background.tertiary}
+        highlightColor={theme.background.transparent.lighter}
+        borderRadius={theme.border.radius.sm}
+      >
+        <Skeleton height={200} />
+      </SkeletonTheme>
+    </StyledSkeletonContainer>
+  );
+};
+
 export const ShowPageActivityContainer = ({
   targetableObject,
 }: {
@@ -28,14 +57,16 @@ export const ShowPageActivityContainer = ({
       componentInstanceId={`scroll-wrapper-tab-list-${targetableObject.id}`}
     >
       <StyledShowPageActivityContainer>
-        <ActivityRichTextEditor
-          activityId={targetableObject.id}
-          activityObjectNameSingular={
-            targetableObject.targetObjectNameSingular as
-              | CoreObjectNameSingular.Note
-              | CoreObjectNameSingular.Task
-          }
-        />
+        <Suspense fallback={<LoadingSkeleton />}>
+          <ActivityRichTextEditor
+            activityId={targetableObject.id}
+            activityObjectNameSingular={
+              targetableObject.targetObjectNameSingular as
+                | CoreObjectNameSingular.Note
+                | CoreObjectNameSingular.Task
+            }
+          />
+        </Suspense>
       </StyledShowPageActivityContainer>
     </ScrollWrapper>
   ) : (