From 88b6d3a6d7985f0b71bc9c25d7458cecf92a311f Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 31 Mar 2026 11:28:52 +0200
Subject: [PATCH] Similar Channels: Fix animation (#6778)

---
 .../middle/message/SimilarChannels.module.scss   |  6 ++++++
 .../middle/message/SimilarChannels.tsx           | 16 ++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/middle/message/SimilarChannels.module.scss b/src/components/middle/message/SimilarChannels.module.scss
index 982f5ea67..101bc888e 100644
--- a/src/components/middle/message/SimilarChannels.module.scss
+++ b/src/components/middle/message/SimilarChannels.module.scss
@@ -61,6 +61,12 @@
   background: var(--color-background);
 }
 
+.channelsWrapper {
+  transform: scale(0) translateY(-50%);
+  height: 0;
+  opacity: 0;
+}
+
 .is-appearing {
   animation: 0.15s ease-out channels-appear forwards;
 }
diff --git a/src/components/middle/message/SimilarChannels.tsx b/src/components/middle/message/SimilarChannels.tsx
index bd411f1e7..ab1c45a77 100644
--- a/src/components/middle/message/SimilarChannels.tsx
+++ b/src/components/middle/message/SimilarChannels.tsx
@@ -67,6 +67,13 @@ const SimilarChannels = ({
   const ref = useRef<HTMLDivElement>();
 
   const ignoreAutoScrollRef = useRef(false);
+  const wasExpandedRef = useRef(false);
+  const wasClosedManuallyRef = useRef(false);
+
+  useEffect(() => {
+    wasClosedManuallyRef.current = false;
+  }, [chatId]);
+
   const similarChannels = useMemo(() => {
     if (!similarChannelIds) {
       return undefined;
@@ -111,6 +118,7 @@ const SimilarChannels = ({
 
   useEffect(() => {
     if (isExpanded) {
+      wasExpandedRef.current = true;
       markShowing();
       markNotHiding();
       setShouldRenderSkeleton(!similarChannelIds);
@@ -119,18 +127,21 @@ const SimilarChannels = ({
           ref.current?.scrollIntoView({ behavior: 'smooth' });
         }, ANIMATION_DURATION);
       }
-    } else {
+    } else if (wasExpandedRef.current) {
       markNotShowing();
       markHiding();
     }
   }, [isExpanded, similarChannelIds]);
 
   const handleToggle = useLastCallback(() => {
+    if (isExpanded) {
+      wasClosedManuallyRef.current = true;
+    }
     toggleChannelRecommendations({ chatId });
   });
 
   useEffect(() => {
-    if (!channelJoinInfo?.joinedDate || isExpanded) return;
+    if (!channelJoinInfo?.joinedDate || isExpanded || wasClosedManuallyRef.current) return;
     if (getServerTime() - channelJoinInfo.joinedDate <= AUTO_EXPAND_TIME) {
       handleToggle();
       ignoreAutoScrollRef.current = true;
@@ -147,6 +158,7 @@ const SimilarChannels = ({
       {shouldRenderChannels && (
         <div
           className={buildClassName(
+            styles.channelsWrapper,
             isShowing && styles.isAppearing,
             isHiding && styles.isHiding,
           )}