3811 add accounts loader (#3829)

* rename exports

* rename exports

* fix css

* done

* updating image

packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const StyledEmptyContainer = styled.div`
+const StyledEmptyContainer = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
@@ -11,7 +11,9 @@ export const StyledEmptyContainer = styled.div`
   text-align: center;
 `;
 
-export const StyledEmptyTextContainer = styled.div`
+export { StyledEmptyContainer as AnimatedPlaceholderEmptyContainer };
+
+const StyledEmptyTextContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -21,13 +23,17 @@ export const StyledEmptyTextContainer = styled.div`
   width: 100%;
 `;
 
-export const StyledEmptyTitle = styled.div`
+export { StyledEmptyTextContainer as AnimatedPlaceholderEmptyTextContainer };
+
+const StyledEmptyTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
 `;
 
-export const StyledEmptySubTitle = styled.div`
+export { StyledEmptyTitle as AnimatedPlaceholderEmptyTitle };
+
+const StyledEmptySubTitle = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
@@ -36,3 +42,5 @@ export const StyledEmptySubTitle = styled.div`
   overflow: hidden;
   width: 50%;
 `;
+
+export { StyledEmptySubTitle as AnimatedPlaceholderEmptySubTitle };

packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/ErrorPlaceholderStyled.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const StyledErrorContainer = styled.div`
+const StyledErrorContainer = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
@@ -11,7 +11,9 @@ export const StyledErrorContainer = styled.div`
   text-align: center;
 `;
 
-export const StyledErrorTextContainer = styled.div`
+export { StyledErrorContainer as AnimatedPlaceholderErrorContainer };
+
+const StyledErrorTextContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -21,14 +23,18 @@ export const StyledErrorTextContainer = styled.div`
   width: 100%;
 `;
 
-export const StyledErrorTitle = styled.div`
+export { StyledErrorTextContainer as AnimatedPlaceholderErrorTextContainer };
+
+const StyledErrorTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
 `;
 
-export const StyledErrorSubTitle = styled.div`
+export { StyledErrorTitle as AnimatedPlaceholderErrorTitle };
+
+const StyledErrorSubTitle = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.regular};
@@ -36,3 +42,5 @@ export const StyledErrorSubTitle = styled.div`
   max-height: 2.4em;
   overflow: hidden;
 `;
+
+export { StyledErrorSubTitle as AnimatedPlaceholderErrorSubTitle };

packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts

@@ -6,6 +6,7 @@ export const Background: Record<string, string> = {
   errorIndex: '/images/placeholders/background/error_index_bg.png',
   emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
   loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
+  loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
   emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
   error404: '/images/placeholders/background/404_bg.png',
   error500: '/images/placeholders/background/500_bg.png',
@@ -19,6 +20,7 @@ export const MovingImage: Record<string, string> = {
   errorIndex: '/images/placeholders/moving-image/error_index.png',
   emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
   loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
+  loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
   emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
   error404: '/images/placeholders/moving-image/404.png',
   error500: '/images/placeholders/moving-image/500.png',

packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx

@@ -11,6 +11,7 @@ type SubMenuTopBarContainerProps = {
   children: JSX.Element | JSX.Element[];
   title: string;
   Icon: IconComponent;
+  className?: string;
 };
 
 const StyledContainer = styled.div<{ isMobile: boolean }>`
@@ -24,11 +25,12 @@ export const SubMenuTopBarContainer = ({
   children,
   title,
   Icon,
+  className,
 }: SubMenuTopBarContainerProps) => {
   const isMobile = useIsMobile();
 
   return (
-    <StyledContainer isMobile={isMobile}>
+    <StyledContainer isMobile={isMobile} className={className}>
       {isMobile && <PageHeader title={title} Icon={Icon} />}
       <RightDrawerContainer>{children}</RightDrawerContainer>
     </StyledContainer>