User & Metadata Loading (#5347)

### Description
User & Metadata Loading

### Refs
#4456

### Demo


https://github.com/twentyhq/twenty/assets/140154534/4c20fca6-feaf-45f6-ac50-6532d2ebf050


Fixes #4456

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx

@@ -0,0 +1,34 @@
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import styled from '@emotion/styled';
+import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
+
+const StyledSkeletonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-left: 12px;
+  margin-top: 8px;
+`;
+
+export const MainNavigationDrawerItemsSkeletonLoader = ({
+  title,
+  length,
+}: {
+  title?: boolean;
+  length: number;
+}) => {
+  return (
+    <StyledSkeletonContainer>
+      <SkeletonTheme
+        baseColor={GRAY_SCALE.gray15}
+        highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+        borderRadius={4}
+      >
+        {title && <Skeleton width={48} height={13} />}
+        {Array.from({ length }).map((_, index) => (
+          <Skeleton key={index} width={196} height={16} />
+        ))}
+      </SkeletonTheme>
+    </StyledSkeletonContainer>
+  );
+};