2973-feat: Skeleton Loading Added (#2988)

* 2973-feat: Skeleton Loading Added

* loading from useQuery

* PR suggestions fixed

* Fix accoding to review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -55,7 +55,7 @@ export const RecordShowPage = () => {
     entityFieldsFamilyState(objectRecordId ?? ''),
   );
 
-  const { record } = useFindOneRecord({
+  const { record, loading } = useFindOneRecord({
     objectRecordId,
     objectNameSingular,
     onCompleted: (data) => {
@@ -129,12 +129,10 @@ export const RecordShowPage = () => {
     }
   };
 
-  if (!record) return <></>;
-
   const pageName =
     objectNameSingular === 'person'
-      ? record.name.firstName + ' ' + record.name.lastName
+      ? record?.name.firstName + ' ' + record?.name.lastName
-      : record.name;
+      : record?.name;
 
   const recordIdentifiers = identifiersMapper?.(
     record,
@@ -161,9 +159,12 @@ export const RecordShowPage = () => {
     if (!updateOneRecord) {
       return;
     }
+    if (!record) {
+      return;
+    }
 
     await updateOneRecord({
-      idToUpdate: record?.id,
+      idToUpdate: record.id,
       input: {
         avatarUrl,
       },
@@ -178,7 +179,7 @@ export const RecordShowPage = () => {
         hasBackButton
         Icon={IconBuildingSkyscraper}
       >
-        {objectMetadataType !== 'Custom' && (
+        {record && objectMetadataType !== 'Custom' && (
           <>
             <PageFavoriteButton
               isFavorite={isFavorite}
@@ -198,6 +199,8 @@ export const RecordShowPage = () => {
         <RecoilScope CustomRecoilScopeContext={ShowPageRecoilScopeContext}>
           <ShowPageContainer>
             <ShowPageLeftContainer>
+              {!loading && record ? (
+                <>
                   <ShowPageSummaryCard
                     id={record.id}
                     logoOrAvatar={recordIdentifiers?.avatarUrl}
@@ -206,7 +209,9 @@ export const RecordShowPage = () => {
                     renderTitleEditComponent={() => <></>}
                     avatarType={recordIdentifiers?.avatarType ?? 'rounded'}
                     onUploadPicture={
-                  objectNameSingular === 'person' ? onUploadPicture : undefined
+                      objectNameSingular === 'person'
+                        ? onUploadPicture
+                        : undefined
                     }
                   />
                   <PropertyBox extraPadding={true}>
@@ -247,10 +252,14 @@ export const RecordShowPage = () => {
                   ) : (
                     <></>
                   )}
+                </>
+              ) : (
+                <></>
+              )}
             </ShowPageLeftContainer>
             <ShowPageRightContainer
               entity={{
-                id: record.id,
+                id: record?.id || '',
                 // TODO: refacto
                 type:
                   objectMetadataItem?.nameSingular === 'company'

packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx

@@ -25,7 +25,7 @@ const StyledScrollWrapper = styled(ScrollWrapper)`
 `;
 
 export type ShowPageContainerProps = {
-  children: ReactElement[];
+  children: ReactElement[] | ReactElement;
 };
 
 export const ShowPageContainer = ({ children }: ShowPageContainerProps) => {

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

@@ -38,7 +38,7 @@ const StyledIntermediateContainer = styled.div`
 `;
 
 export type ShowPageLeftContainerProps = {
-  children: ReactElement[];
+  children: ReactElement;
 };
 
 export const ShowPageLeftContainer = ({

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

@@ -40,7 +40,7 @@ const StyledTabListContainer = styled.div`
 `;
 
 type ShowPageRightContainerProps = {
-  entity: ActivityTargetableEntity;
+  entity?: ActivityTargetableEntity;
   timeline?: boolean;
   tasks?: boolean;
   notes?: boolean;
@@ -55,7 +55,12 @@ export const ShowPageRightContainer = ({
   emails,
 }: ShowPageRightContainerProps) => {
   const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
+  const [activeTabId] = useRecoilScopedState(
+    activeTabIdScopedState,
+    ShowPageRecoilScopeContext,
+  );
 
+  if (!entity) return <></>;
   const TASK_TABS = [
     {
       id: 'timeline',
@@ -94,11 +99,6 @@ export const ShowPageRightContainer = ({
     },
   ];
 
-  const [activeTabId] = useRecoilScopedState(
-    activeTabIdScopedState,
-    ShowPageRecoilScopeContext,
-  );
-
   return (
     <StyledShowPageRightContainer>
       <StyledTabListContainer>