From da69dea394326211e08a1e7b24f88b13735fc0f0 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 27 Mar 2025 19:03:15 +0100
Subject: [PATCH] Messages: Add appearance order to avatar list (#5731)

---
 src/components/middle/MessageListContent.tsx  |  2 ++
 .../message/SenderGroupContainer.module.scss  |  6 ++--
 .../middle/message/SenderGroupContainer.tsx   | 28 +++++++++++++++++--
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/middle/MessageListContent.tsx b/src/components/middle/MessageListContent.tsx
index 3e2754fb7..63d263582 100644
--- a/src/components/middle/MessageListContent.tsx
+++ b/src/components/middle/MessageListContent.tsx
@@ -264,6 +264,7 @@ const MessageListContent: FC<OwnProps> = ({
       const lastMessageOrAlbum = senderGroup[senderGroup.length - 1];
       const lastMessage = isAlbum(lastMessageOrAlbum) ? lastMessageOrAlbum.mainMessage : lastMessageOrAlbum;
       const lastMessageId = getMessageOriginalId(lastMessage);
+      const lastAppearanceOrder = messageCountToAnimate - appearanceIndex;
 
       const isTopicTopMessage = lastMessage.id === threadId;
       const isOwn = isOwnMessage(lastMessage);
@@ -283,6 +284,7 @@ const MessageListContent: FC<OwnProps> = ({
           id={id}
           message={lastMessage}
           withAvatar={withAvatar}
+          appearanceOrder={lastAppearanceOrder}
         >
           {senderGroupElements}
         </SenderGroupContainer>
diff --git a/src/components/middle/message/SenderGroupContainer.module.scss b/src/components/middle/message/SenderGroupContainer.module.scss
index 3b1e2bf95..af665afdf 100644
--- a/src/components/middle/message/SenderGroupContainer.module.scss
+++ b/src/components/middle/message/SenderGroupContainer.module.scss
@@ -10,8 +10,10 @@
   bottom: 0;
   z-index: 2;
 
-  transform: translateX(0);
-  transition: transform var(--select-transition);
+  transform: translateX(0) scale(1);
+  opacity: 1;
+
+  transition: opacity 0.2s, transform var(--select-transition);
 
   :global(.select-mode-active) & {
     transform: translateX(2.5rem);
diff --git a/src/components/middle/message/SenderGroupContainer.tsx b/src/components/middle/message/SenderGroupContainer.tsx
index b78a76ba7..ba96c92df 100644
--- a/src/components/middle/message/SenderGroupContainer.tsx
+++ b/src/components/middle/message/SenderGroupContainer.tsx
@@ -1,6 +1,7 @@
 import type { FC } from '../../../lib/teact/teact';
 import React, {
   memo,
+  useEffect,
 } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
@@ -9,6 +10,7 @@ import type {
   ApiPeer,
 } from '../../../api/types';
 
+import { MESSAGE_APPEARANCE_DELAY } from '../../../config';
 import {
   isAnonymousForwardsChat,
   isAnonymousOwnMessage,
@@ -21,7 +23,9 @@ import {
 } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
 
+import useFlag from '../../../hooks/useFlag';
 import useLastCallback from '../../../hooks/useLastCallback';
+import useShowTransition from '../../../hooks/useShowTransition';
 
 import Avatar from '../../common/Avatar';
 
@@ -33,6 +37,7 @@ type OwnProps =
     withAvatar?: boolean;
     children: React.ReactNode;
     id: string;
+    appearanceOrder: number;
   };
 
   type StateProps = {
@@ -49,6 +54,7 @@ const SenderGroupContainer: FC<OwnProps & StateProps> = ({
   withAvatar,
   children,
   id,
+  appearanceOrder,
   sender,
   canShowSender,
   originSender,
@@ -62,6 +68,16 @@ const SenderGroupContainer: FC<OwnProps & StateProps> = ({
 
   const messageSender = canShowSender ? sender : undefined;
 
+  const noAppearanceAnimation = appearanceOrder <= 0;
+  const [isShown, markShown] = useFlag(noAppearanceAnimation);
+  useEffect(() => {
+    if (noAppearanceAnimation) {
+      return;
+    }
+
+    setTimeout(markShown, appearanceOrder * MESSAGE_APPEARANCE_DELAY);
+  }, [appearanceOrder, markShown, noAppearanceAnimation]);
+
   const shouldPreferOriginSender = forwardInfo
   && (isChatWithSelf || isRepliesChat || isAnonymousForwards || !messageSender);
   const avatarPeer = shouldPreferOriginSender ? originSender : messageSender;
@@ -74,6 +90,14 @@ const SenderGroupContainer: FC<OwnProps & StateProps> = ({
     openChat({ id: avatarPeer.id });
   });
 
+  const {
+    ref: avatarRef,
+    shouldRender,
+  } = useShowTransition({
+    isOpen: withAvatar && isShown,
+    withShouldRender: true,
+  });
+
   function renderAvatar() {
     const hiddenName = (!avatarPeer && forwardInfo) ? forwardInfo.hiddenUserName : undefined;
 
@@ -95,8 +119,8 @@ const SenderGroupContainer: FC<OwnProps & StateProps> = ({
 
   return (
     <div id={id} className={className}>
-      {withAvatar && (
-        <div className={styles.avatarContainer}>
+      {shouldRender && (
+        <div ref={avatarRef} className={styles.avatarContainer}>
           {renderAvatar()}
         </div>
       )}