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,51 +199,59 @@ export const RecordShowPage = () => {
         <RecoilScope CustomRecoilScopeContext={ShowPageRecoilScopeContext}>
           <ShowPageContainer>
             <ShowPageLeftContainer>
-              <ShowPageSummaryCard
+              {!loading && record ? (
-                id={record.id}
-                logoOrAvatar={recordIdentifiers?.avatarUrl}
-                title={recordIdentifiers?.name ?? 'No name'}
-                date={record.createdAt ?? ''}
-                renderTitleEditComponent={() => <></>}
-                avatarType={recordIdentifiers?.avatarType ?? 'rounded'}
-                onUploadPicture={
-                  objectNameSingular === 'person' ? onUploadPicture : undefined
-                }
-              />
-              <PropertyBox extraPadding={true}>
-                {objectMetadataItem &&
-                  [...objectMetadataItem.fields]
-                    .sort((a, b) =>
-                      a.name === 'name' ? -1 : a.name.localeCompare(b.name),
-                    )
-                    .filter(isFieldMetadataItemAvailable)
-                    .map((metadataField, index) => {
-                      return (
-                        <FieldContext.Provider
-                          key={record.id + metadataField.id}
-                          value={{
-                            entityId: record.id,
-                            recoilScopeId: record.id + metadataField.id,
-                            isLabelIdentifier: false,
-                            fieldDefinition:
-                              formatFieldMetadataItemAsColumnDefinition({
-                                field: metadataField,
-                                position: index,
-                                objectMetadataItem,
-                              }),
-                            useUpdateEntityMutation:
-                              useUpdateOneObjectRecordMutation,
-                            hotkeyScope: InlineCellHotkeyScope.InlineCell,
-                          }}
-                        >
-                          <RecordInlineCell />
-                        </FieldContext.Provider>
-                      );
-                    })}
-              </PropertyBox>
-              {objectNameSingular === 'company' ? (
                 <>
-                  <CompanyTeam company={record} />
+                  <ShowPageSummaryCard
+                    id={record.id}
+                    logoOrAvatar={recordIdentifiers?.avatarUrl}
+                    title={recordIdentifiers?.name ?? 'No name'}
+                    date={record.createdAt ?? ''}
+                    renderTitleEditComponent={() => <></>}
+                    avatarType={recordIdentifiers?.avatarType ?? 'rounded'}
+                    onUploadPicture={
+                      objectNameSingular === 'person'
+                        ? onUploadPicture
+                        : undefined
+                    }
+                  />
+                  <PropertyBox extraPadding={true}>
+                    {objectMetadataItem &&
+                      [...objectMetadataItem.fields]
+                        .sort((a, b) =>
+                          a.name === 'name' ? -1 : a.name.localeCompare(b.name),
+                        )
+                        .filter(isFieldMetadataItemAvailable)
+                        .map((metadataField, index) => {
+                          return (
+                            <FieldContext.Provider
+                              key={record.id + metadataField.id}
+                              value={{
+                                entityId: record.id,
+                                recoilScopeId: record.id + metadataField.id,
+                                isLabelIdentifier: false,
+                                fieldDefinition:
+                                  formatFieldMetadataItemAsColumnDefinition({
+                                    field: metadataField,
+                                    position: index,
+                                    objectMetadataItem,
+                                  }),
+                                useUpdateEntityMutation:
+                                  useUpdateOneObjectRecordMutation,
+                                hotkeyScope: InlineCellHotkeyScope.InlineCell,
+                              }}
+                            >
+                              <RecordInlineCell />
+                            </FieldContext.Provider>
+                          );
+                        })}
+                  </PropertyBox>
+                  {objectNameSingular === 'company' ? (
+                    <>
+                      <CompanyTeam company={record} />
+                    </>
+                  ) : (
+                    <></>
+                  )}
                 </>
               ) : (
                 <></>
@@ -250,7 +259,7 @@ 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>