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/LeftPanelSkeletonLoader.tsx

@@ -0,0 +1,74 @@
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { ANIMATION, BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
+
+import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
+
+const StyledAnimatedContainer = styled(motion.div)`
+  display: flex;
+  justify-content: end;
+`;
+
+const StyledItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin-bottom: auto;
+  overflow-y: auto;
+  height: calc(100vh - 32px);
+  min-width: 216px;
+  max-width: 216px;
+`;
+
+const StyledSkeletonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+const StyledSkeletonTitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-left: 12px;
+  margin-top: 8px;
+`;
+
+export const LeftPanelSkeletonLoader = () => {
+  const isMobile = useIsMobile();
+  const mobileWidth = isMobile ? 0 : '100%';
+  const desktopWidth = !mobileWidth ? 12 : DESKTOP_NAV_DRAWER_WIDTHS.menu;
+
+  return (
+    <StyledAnimatedContainer
+      initial={false}
+      animate={{
+        width: isMobile ? mobileWidth : desktopWidth,
+        opacity: isMobile ? 0 : 1,
+      }}
+      transition={{
+        duration: ANIMATION.duration.fast,
+      }}
+    >
+      <StyledItemsContainer>
+        <StyledSkeletonContainer>
+          <StyledSkeletonTitleContainer>
+            <SkeletonTheme
+              baseColor={GRAY_SCALE.gray15}
+              highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+              borderRadius={4}
+            >
+              <Skeleton width={96} height={16} />
+            </SkeletonTheme>
+          </StyledSkeletonTitleContainer>
+          <MainNavigationDrawerItemsSkeletonLoader length={4} />
+          <MainNavigationDrawerItemsSkeletonLoader title length={2} />
+          <MainNavigationDrawerItemsSkeletonLoader title length={3} />
+        </StyledSkeletonContainer>
+      </StyledItemsContainer>
+    </StyledAnimatedContainer>
+  );
+};

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>
+  );
+};

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

@@ -0,0 +1,92 @@
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import styled from '@emotion/styled';
+import {
+  BACKGROUND_LIGHT,
+  BORDER_COMMON,
+  BORDER_LIGHT,
+  GRAY_SCALE,
+  MOBILE_VIEWPORT,
+} from 'twenty-ui';
+
+const StyledMainContainer = styled.div`
+  background: ${BACKGROUND_LIGHT.noisy};
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  gap: 8px;
+  min-height: 0;
+  padding-left: 0;
+  width: 100%;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    padding-left: 12px;
+    padding-bottom: 0;
+  }
+`;
+
+const StyledPanel = styled.div`
+  background: ${BACKGROUND_LIGHT.primary};
+  border: 1px solid ${BORDER_LIGHT.color.medium};
+  border-radius: ${BORDER_COMMON.radius.md};
+  height: 100%;
+  overflow: auto;
+  width: 100%;
+`;
+
+const StyledHeaderContainer = styled.div`
+  flex: 1;
+`;
+const StyledRightPanelContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const StyledRightPanelFlexContainer = styled.div`
+  display: flex;
+  margin-top: 12px;
+  margin-bottom: 14px;
+`;
+
+const StyledSkeletonHeaderLoader = () => {
+  return (
+    <StyledHeaderContainer>
+      <SkeletonTheme
+        baseColor={GRAY_SCALE.gray15}
+        highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+        borderRadius={4}
+      >
+        <Skeleton height={16} width={104} />
+      </SkeletonTheme>
+    </StyledHeaderContainer>
+  );
+};
+
+const StyledSkeletonAddLoader = () => {
+  return (
+    <SkeletonTheme
+      baseColor={GRAY_SCALE.gray15}
+      highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+      borderRadius={4}
+    >
+      <Skeleton width={132} height={16} />
+    </SkeletonTheme>
+  );
+};
+
+const RightPanelSkeleton = () => (
+  <StyledMainContainer>
+    <StyledPanel></StyledPanel>
+  </StyledMainContainer>
+);
+
+export const RightPanelSkeletonLoader = () => (
+  <StyledRightPanelContainer>
+    <StyledRightPanelFlexContainer>
+      <StyledSkeletonHeaderLoader />
+      <StyledSkeletonAddLoader />
+    </StyledRightPanelFlexContainer>
+    <RightPanelSkeleton />
+  </StyledRightPanelContainer>
+);

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

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import { BACKGROUND_LIGHT, MOBILE_VIEWPORT } from 'twenty-ui';
+
+import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths';
+import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
+import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
+
+const StyledContainer = styled.div`
+  background: ${BACKGROUND_LIGHT.noisy};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  height: 100vh;
+  min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
+  width: 100%;
+  padding: 12px 8px 12px;
+  overflow: hidden;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: 100%;
+  }
+`;
+
+export const UserOrMetadataLoader = () => {
+  return (
+    <StyledContainer>
+      <LeftPanelSkeletonLoader />
+      <RightPanelSkeletonLoader />
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/loading/hooks/useUserOrMetadataLoading.ts

@@ -0,0 +1,11 @@
+import { useRecoilValue } from 'recoil';
+
+import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+
+export const useUserOrMetadataLoading = () => {
+  const isCurrentUserLoaded = useRecoilValue(isCurrentUserLoadedState);
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  return !isCurrentUserLoaded || objectMetadataItems.length === 0;
+};

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx

@@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil';
 import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
+import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
 
 export const ObjectMetadataItemsProvider = ({
   children,
@@ -15,10 +16,12 @@ export const ObjectMetadataItemsProvider = ({
   return (
     <>
       <ObjectMetadataItemsLoadEffect />
-      {shouldDisplayChildren && (
+      {shouldDisplayChildren ? (
         <RelationPickerScope relationPickerScopeId="relation-picker">
           {children}
         </RelationPickerScope>
+      ) : (
+        <UserOrMetadataLoader />
       )}
     </>
   );

packages/twenty-front/src/modules/users/components/UserProvider.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState';
+import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
 
 export const UserProvider = ({ children }: React.PropsWithChildren) => {
   const isCurrentUserLoaded = useRecoilValue(isCurrentUserLoadedState);
 
-  return !isCurrentUserLoaded ? <></> : <>{children}</>;
+  return !isCurrentUserLoaded ? <UserOrMetadataLoader /> : <>{children}</>;
 };