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,18 +60,24 @@ export const RightDrawerEmailThread = () => {
         subject={viewableEmailThread.subject}
         lastMessageSentAt={viewableEmailThread.lastMessageReceivedAt}
       />
-      {messages.map((message) => (
-        <EmailThreadMessage
-          key={message.id}
-          participants={message.messageParticipants}
-          body={message.text}
-          sentAt={message.receivedAt}
-        />
-      ))}
-      <EmailThreadFetchMoreLoader
-        loading={loading}
-        onLastRowVisible={fetchMoreMessages}
-      />
+      {firstQueryLoading ? (
+        <EmailLoader loadingText="Loading thread" />
+      ) : (
+        <>
+          {messages.map((message) => (
+            <EmailThreadMessage
+              key={message.id}
+              participants={message.messageParticipants}
+              body={message.text}
+              sentAt={message.receivedAt}
+            />
+          ))}
+          <EmailThreadFetchMoreLoader
+            loading={firstQueryLoading}
+            onLastRowVisible={fetchMoreMessages}
+          />
+        </>
+      )}
     </StyledContainer>
   );
 };