Add participant avatars + remove tbody from fetchMore loader (#3679)

* Add participant avatars + remove tbody from fetchMore loader

* Update sender names

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

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

@@ -36,13 +36,20 @@ const StyledHeading = styled.div<{ unread: boolean }>`
   }
 `;
 
-const StyledAvatar = styled(Avatar)`
+const StyledParticipantsContainer = styled.div`
-  margin: ${({ theme }) => theme.spacing(0, 1)};
+  align-items: center;
+  display: flex;
 `;
 
-const StyledSenderName = styled.span`
+const StyledAvatar = styled(Avatar)`
+  margin-left: ${({ theme }) => theme.spacing(-1)};
+`;
+
+const StyledSenderNames = styled.span`
+  margin: ${({ theme }) => theme.spacing(0, 1)};
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledThreadCount = styled.span`
@@ -88,17 +95,49 @@ export const EmailThreadPreview = ({
   thread,
   onClick,
 }: EmailThreadPreviewProps) => {
+  const senderNames =
+    thread.firstParticipant.displayName +
+    (thread?.lastTwoParticipants?.[0]?.displayName
+      ? `, ${thread.lastTwoParticipants?.[0]?.displayName}`
+      : '') +
+    (thread?.lastTwoParticipants?.[1]?.displayName
+      ? `, ${thread.lastTwoParticipants?.[1]?.displayName}`
+      : '');
+
+  const [finalDisplayedName, finalAvatarUrl] =
+    thread.participantCount > 3
+      ? [`${thread.participantCount}`, '']
+      : [
+          thread?.lastTwoParticipants?.[1]?.displayName,
+          thread?.lastTwoParticipants?.[1]?.avatarUrl,
+        ];
+
   return (
     <StyledCardContent onClick={() => onClick()} divider={divider}>
       <StyledHeading unread={!thread.read}>
-        <StyledAvatar
+        <StyledParticipantsContainer>
-          avatarUrl={thread.firstParticipant.avatarUrl}
+          <Avatar
-          placeholder={thread.firstParticipant.displayName}
+            avatarUrl={thread?.firstParticipant?.avatarUrl}
-          type="rounded"
+            placeholder={thread.firstParticipant.displayName}
-        />
+            type="rounded"
-        <StyledSenderName>
+          />
-          {thread.firstParticipant.displayName}
+          {thread?.lastTwoParticipants?.[0] && (
-        </StyledSenderName>
+            <StyledAvatar
+              avatarUrl={thread.lastTwoParticipants[0].avatarUrl}
+              placeholder={thread.lastTwoParticipants[0].displayName}
+              type="rounded"
+            />
+          )}
+          {finalDisplayedName && (
+            <StyledAvatar
+              avatarUrl={finalAvatarUrl}
+              placeholder={finalDisplayedName}
+              type="rounded"
+            />
+          )}
+        </StyledParticipantsContainer>
+
+        <StyledSenderNames>{senderNames}</StyledSenderNames>
         <StyledThreadCount>{thread.numberOfMessagesInThread}</StyledThreadCount>
       </StyledHeading>
 

packages/twenty-front/src/modules/ui/utilities/loading-state/components/FetchMoreLoader.tsx

@@ -27,15 +27,8 @@ export const FetchMoreLoader = ({
   });
 
   return (
-    <tbody ref={tbodyRef}>
+    <div ref={tbodyRef}>
-      {loading && (
+      {loading && <StyledText>Loading more...</StyledText>}
-        <tr>
+    </div>
-          <td colSpan={7}>
-            <StyledText>Loading more...</StyledText>
-          </td>
-          <td colSpan={7} />
-        </tr>
-      )}
-    </tbody>
   );
 };