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' && (