Show Data Skeleton Loading (#5328)

### Description

Show Data Skeleton loading

### Refs

#4460

### Demo

Figma:
https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=25429-70096&mode=design&t=VRxtgYCKnJkl2zpt-0

https://jam.dev/c/178878cb-e600-4370-94d5-c8c12c8fe0d5

Fixes #4460

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

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

@@ -53,6 +53,7 @@ type ShowPageRightContainerProps = {
   tasks?: boolean;
   notes?: boolean;
   emails?: boolean;
+  loading?: boolean;
 };
 
 export const ShowPageRightContainer = ({
@@ -61,6 +62,7 @@ export const ShowPageRightContainer = ({
   tasks,
   notes,
   emails,
+  loading,
 }: ShowPageRightContainerProps) => {
   const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
   const activeTabId = useRecoilValue(activeTabIdState);
@@ -127,12 +129,16 @@ export const ShowPageRightContainer = ({
   return (
     <StyledShowPageRightContainer>
       <StyledTabListContainer>
-        <TabList tabListId={TAB_LIST_COMPONENT_ID} tabs={TASK_TABS} />
+        <TabList
+          loading={loading}
+          tabListId={TAB_LIST_COMPONENT_ID}
+          tabs={TASK_TABS}
+        />
       </StyledTabListContainer>
       {activeTabId === 'timeline' && (
         <>
           <TimelineQueryEffect targetableObject={targetableObject} />
-          <Timeline targetableObject={targetableObject} />
+          <Timeline loading={loading} targetableObject={targetableObject} />
         </>
       )}
       {activeTabId === 'tasks' && (

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

@@ -1,5 +1,7 @@
 import { ChangeEvent, ReactNode, useRef } from 'react';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { Tooltip } from 'react-tooltip';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Avatar, AvatarType } from 'twenty-ui';
 import { v4 as uuidV4 } from 'uuid';
@@ -18,9 +20,10 @@ type ShowPageSummaryCardProps = {
   logoOrAvatar?: string;
   onUploadPicture?: (file: File) => void;
   title: ReactNode;
+  loading: boolean;
 };
 
-const StyledShowPageSummaryCard = styled.div`
+export const StyledShowPageSummaryCard = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -28,6 +31,7 @@ const StyledShowPageSummaryCard = styled.div`
   justify-content: center;
   padding: ${({ theme }) => theme.spacing(4)};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  height: 127px;
 `;
 
 const StyledInfoContainer = styled.div`
@@ -70,6 +74,30 @@ const StyledFileInput = styled.input`
   display: none;
 `;
 
+const StyledSubSkeleton = styled.div`
+  align-items: center;
+  display: flex;
+  height: 37px;
+  justify-content: center;
+  width: 108px;
+`;
+
+const StyledShowPageSummaryCardSkeletonLoader = () => {
+  const theme = useTheme();
+  return (
+    <SkeletonTheme
+      baseColor={theme.background.tertiary}
+      highlightColor={theme.background.transparent.lighter}
+      borderRadius={4}
+    >
+      <Skeleton width={40} height={40} />
+      <StyledSubSkeleton>
+        <Skeleton width={96} height={16} />
+      </StyledSubSkeleton>
+    </SkeletonTheme>
+  );
+};
+
 export const ShowPageSummaryCard = ({
   avatarPlaceholder,
   avatarType,
@@ -78,6 +106,7 @@ export const ShowPageSummaryCard = ({
   logoOrAvatar,
   onUploadPicture,
   title,
+  loading,
 }: ShowPageSummaryCardProps) => {
   const beautifiedCreatedAt =
     date !== '' ? beautifyPastDateRelativeToNow(date) : '';
@@ -93,6 +122,13 @@ export const ShowPageSummaryCard = ({
     inputFileRef?.current?.click?.();
   };
 
+  if (loading)
+    return (
+      <StyledShowPageSummaryCard>
+        <StyledShowPageSummaryCardSkeletonLoader />
+      </StyledShowPageSummaryCard>
+    );
+
   return (
     <StyledShowPageSummaryCard>
       <StyledAvatarWrapper>

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -21,6 +21,7 @@ type SingleTabProps = {
 type TabListProps = {
   tabListId: string;
   tabs: SingleTabProps[];
+  loading?: boolean;
 };
 
 const StyledContainer = styled.div`
@@ -33,7 +34,7 @@ const StyledContainer = styled.div`
   user-select: none;
 `;
 
-export const TabList = ({ tabs, tabListId }: TabListProps) => {
+export const TabList = ({ tabs, tabListId, loading }: TabListProps) => {
   const initialActiveTabId = tabs[0].id;
 
   const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
@@ -60,7 +61,7 @@ export const TabList = ({ tabs, tabListId }: TabListProps) => {
                 onClick={() => {
                   setActiveTabId(tab.id);
                 }}
-                disabled={tab.disabled}
+                disabled={tab.disabled ?? loading}
                 hasBetaPill={tab.hasBetaPill}
               />
             ))}