Prefetch Skeleton Loading on Indexes and Shows (#5545)

### Description
Prefetch Skeleton Loading on Indexes and Shows

### Refs
#4458

### Demo

https://jam.dev/c/a1ad04e1-80b6-4b2a-b7df-373f52f4b169

https://jam.dev/c/c5038b97-2f18-4c29-8dee-18c09376e5ee

Fixes: #4458

---------

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>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/field/display/components/__stories__/perf/EllipsisDisplay.perf.stories.tsx

@@ -12,6 +12,9 @@ const meta: Meta = {
     maxWidth: 100,
     children: 'This is a long text that should be truncated',
   },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 export default meta;

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

@@ -53,7 +53,7 @@ type ShowPageRightContainerProps = {
   tasks?: boolean;
   notes?: boolean;
   emails?: boolean;
-  loading?: boolean;
+  loading: boolean;
 };
 
 export const ShowPageRightContainer = ({

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx

@@ -1,5 +1,8 @@
 import styled from '@emotion/styled';
 
+import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
+import { NavigationDrawerSectionTitleSkeletonLoader } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader';
+
 type NavigationDrawerSectionTitleProps = {
   label: string;
 };
@@ -15,4 +18,11 @@ const StyledTitle = styled.div`
 
 export const NavigationDrawerSectionTitle = ({
   label,
-}: NavigationDrawerSectionTitleProps) => <StyledTitle>{label}</StyledTitle>;
+}: NavigationDrawerSectionTitleProps) => {
+  const loading = useIsPrefetchLoading();
+  return loading ? (
+    <NavigationDrawerSectionTitleSkeletonLoader />
+  ) : (
+    <StyledTitle>{label}</StyledTitle>
+  );
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx

@@ -0,0 +1,23 @@
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledSkeletonTitle = styled.div`
+  margin-bottom: ${(props) => props.theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const NavigationDrawerSectionTitleSkeletonLoader = () => {
+  const theme = useTheme();
+  return (
+    <SkeletonTheme
+      baseColor={theme.background.tertiary}
+      highlightColor={theme.background.transparent.lighter}
+      borderRadius={4}
+    >
+      <StyledSkeletonTitle>
+        <Skeleton width={56} height={13} />
+      </StyledSkeletonTitle>
+    </SkeletonTheme>
+  );
+};