Messages: Add appearance order to avatar list (#5731)

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>

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);

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>
       )}