Fix activity (#11015)

Deprecating unused states and making sure that the ActivityRichText
editor loads when activity.bodyV2 is present

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

@@ -1,12 +1,13 @@
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
+import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 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';
+import { isDefined } from 'twenty-shared';
 
 const ActivityRichTextEditor = lazy(() =>
   import('@/activities/components/ActivityRichTextEditor').then((module) => ({
@@ -20,7 +21,12 @@ const StyledShowPageActivityContainer = styled.div`
 `;
 
 const StyledSkeletonContainer = styled.div`
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  gap: ${({ theme }) => theme.spacing(3)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(4)};
 `;
 
 const LoadingSkeleton = () => {
@@ -33,7 +39,9 @@ const LoadingSkeleton = () => {
         highlightColor={theme.background.transparent.lighter}
         borderRadius={theme.border.radius.sm}
       >
-        <Skeleton height={200} />
+        <Skeleton height={24} />
+        <Skeleton height={24} />
+        <Skeleton height={24} />
       </SkeletonTheme>
     </StyledSkeletonContainer>
   );
@@ -47,16 +55,23 @@ export const ShowPageActivityContainer = ({
     'targetObjectNameSingular' | 'id'
   >;
 }) => {
-  const isNewViewableRecordLoading = useRecoilValue(
-    isNewViewableRecordLoadingState,
-  );
-
   const activityObjectNameSingular =
     targetableObject.targetObjectNameSingular as
       | CoreObjectNameSingular.Note
       | CoreObjectNameSingular.Task;
 
-  return !isNewViewableRecordLoading ? (
+  const activityBodyV2 = useRecoilValue(
+    recordStoreFamilySelector({
+      recordId: targetableObject.id,
+      fieldName: 'bodyV2',
+    }),
+  );
+
+  if (!isDefined(activityBodyV2)) {
+    return <LoadingSkeleton />;
+  }
+
+  return (
     <ScrollWrapper
       contextProviderName="showPageActivityContainer"
       componentInstanceId={`scroll-wrapper-tab-list-${targetableObject.id}`}
@@ -70,7 +85,5 @@ export const ShowPageActivityContainer = ({
         </Suspense>
       </StyledShowPageActivityContainer>
     </ScrollWrapper>
-  ) : (
-    <></>
   );
 };

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

@@ -1,7 +1,6 @@
 import { RecordShowRightDrawerActionMenu } from '@/action-menu/components/RecordShowRightDrawerActionMenu';
 import { RecordShowRightDrawerOpenRecordButton } from '@/action-menu/components/RecordShowRightDrawerOpenRecordButton';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { CardComponents } from '@/object-record/record-show/components/CardComponents';
 import { FieldsCard } from '@/object-record/record-show/components/FieldsCard';
 import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
@@ -14,7 +13,7 @@ import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import styled from '@emotion/styled';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
   display: flex;
@@ -62,7 +61,6 @@ export const ShowPageSubContainer = ({
   targetableObject,
   loading,
   isInRightDrawer = false,
-  isNewRightDrawerItemLoading = false,
 }: ShowPageSubContainerProps) => {
   const tabListComponentId = `${TAB_LIST_COMPONENT_ID}-${isInRightDrawer}-${targetableObject.id}`;
 
@@ -70,15 +68,10 @@ export const ShowPageSubContainer = ({
 
   const isMobile = useIsMobile();
 
-  const isNewViewableRecordLoading = useRecoilValue(
-    isNewViewableRecordLoadingState,
-  );
-
   const summaryCard = (
     <SummaryCard
       objectNameSingular={targetableObject.targetObjectNameSingular}
       objectRecordId={targetableObject.id}
-      isNewRightDrawerItemLoading={isNewRightDrawerItemLoading}
       isInRightDrawer={isInRightDrawer}
     />
   );
@@ -127,7 +120,7 @@ export const ShowPageSubContainer = ({
         <StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
           <StyledTabList
             behaveAsLinks={!isInRightDrawer}
-            loading={loading || isNewViewableRecordLoading}
+            loading={loading}
             tabListInstanceId={tabListComponentId}
             tabs={tabs}
             isInRightDrawer={isInRightDrawer}