3706 add email loader (#3731)

* add images

* update component

* wip

* add loader cntainer

* wip

* Loader is working

* fix color and keyframes

* change loading message for threads

packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx

@@ -0,0 +1,17 @@
+import { Loader } from '@/ui/feedback/loader/components/Loader';
+import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import {
+  StyledEmptyContainer,
+  StyledEmptyTextContainer,
+  StyledEmptyTitle,
+} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+
+export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (
+  <StyledEmptyContainer>
+    <AnimatedPlaceholder type="loadingMessages" />
+    <StyledEmptyTextContainer>
+      <StyledEmptyTitle>{loadingText || 'Loading emails'}</StyledEmptyTitle>
+      <Loader />
+    </StyledEmptyTextContainer>
+  </StyledEmptyContainer>
+);

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@apollo/client';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
+import { EmailLoader } from '@/activities/emails/components/EmailLoader';
 import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
 import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
 import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/messaging.constants';
@@ -148,6 +149,10 @@ export const EmailThreads = ({
   const { totalNumberOfThreads, timelineThreads }: TimelineThreadsWithTotal =
     data?.[queryName] ?? [];
 
+  if (firstQueryLoading) {
+    return <EmailLoader />;
+  }
+
   if (!firstQueryLoading && !timelineThreads?.length) {
     return (
       <StyledEmptyContainer>

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
+import { EmailLoader } from '@/activities/emails/components/EmailLoader';
 import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
 import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
 import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
@@ -25,7 +26,7 @@ export const RightDrawerEmailThread = () => {
 
   const {
     records: messages,
-    loading,
+    loading: firstQueryLoading,
     fetchMoreRecords,
   } = useFindManyRecords<EmailThreadMessageType>({
     depth: 3,
@@ -44,10 +45,10 @@ export const RightDrawerEmailThread = () => {
   });
 
   const fetchMoreMessages = useCallback(() => {
-    if (!loading) {
+    if (!firstQueryLoading) {
       fetchMoreRecords();
     }
-  }, [fetchMoreRecords, loading]);
+  }, [fetchMoreRecords, firstQueryLoading]);
 
   if (!viewableEmailThread) {
     return null;
@@ -59,6 +60,10 @@ export const RightDrawerEmailThread = () => {
         subject={viewableEmailThread.subject}
         lastMessageSentAt={viewableEmailThread.lastMessageReceivedAt}
       />
+      {firstQueryLoading ? (
+        <EmailLoader loadingText="Loading thread" />
+      ) : (
+        <>
           {messages.map((message) => (
             <EmailThreadMessage
               key={message.id}
@@ -68,9 +73,11 @@ export const RightDrawerEmailThread = () => {
             />
           ))}
           <EmailThreadFetchMoreLoader
-        loading={loading}
+            loading={firstQueryLoading}
             onLastRowVisible={fetchMoreMessages}
           />
+        </>
+      )}
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+const StyledLoaderContainer = styled.div`
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  width: ${({ theme }) => theme.spacing(6)};
+  height: ${({ theme }) => theme.spacing(3)};
+  border-radius: ${({ theme }) => theme.border.radius.pill};
+  border: 1px solid ${({ theme }) => theme.font.color.tertiary};
+  overflow: hidden;
+`;
+
+const StyledLoader = styled(motion.div)`
+  background-color: ${({ theme }) => theme.font.color.tertiary};
+  border-radius: ${({ theme }) => theme.border.radius.pill};
+  height: 8px;
+  width: 8px;
+`;
+
+export const Loader = () => (
+  <StyledLoaderContainer>
+    <StyledLoader
+      animate={{
+        x: [-16, 0, 16],
+        width: [8, 12, 8],
+        height: [8, 2, 8],
+      }}
+      transition={{
+        duration: 0.8,
+        times: [0, 0.15, 0.3],
+        repeat: Infinity,
+      }}
+    />
+  </StyledLoaderContainer>
+);

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

@@ -5,6 +5,7 @@ export const Background: Record<string, string> = {
   noTask: '/images/placeholders/background/no_task_bg.png',
   errorIndex: '/images/placeholders/background/error_index_bg.png',
   emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
+  loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
   emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
   error404: '/images/placeholders/background/404_bg.png',
   error500: '/images/placeholders/background/500_bg.png',
@@ -17,6 +18,7 @@ export const MovingImage: Record<string, string> = {
   noTask: '/images/placeholders/moving-image/no_task.png',
   errorIndex: '/images/placeholders/moving-image/error_index.png',
   emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
+  loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
   emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
   error404: '/images/placeholders/moving-image/404.png',
   error500: '/images/placeholders/moving-image/500.png',