From 2072059cf4531186ae3657c737b9887fa75e9f93 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 13 Feb 2025 14:27:36 +0100
Subject: [PATCH] Management: Fix blinking elements (#5443)

---
 .../left/settings/folders/SettingsFoldersEdit.tsx          | 4 ++--
 .../left/settings/folders/SettingsFoldersMain.tsx          | 4 ++--
 src/components/right/Profile.scss                          | 7 +++++++
 src/components/right/Profile.tsx                           | 5 ++++-
 src/components/right/RightColumn.tsx                       | 1 +
 src/components/right/management/ManageDiscussion.tsx       | 4 ++--
 src/components/right/management/ManageInvites.tsx          | 4 ++--
 src/components/right/management/ManageJoinRequests.tsx     | 4 ++--
 8 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/left/settings/folders/SettingsFoldersEdit.tsx b/src/components/left/settings/folders/SettingsFoldersEdit.tsx
index 72e632a23..401710a3e 100644
--- a/src/components/left/settings/folders/SettingsFoldersEdit.tsx
+++ b/src/components/left/settings/folders/SettingsFoldersEdit.tsx
@@ -23,7 +23,7 @@ import { selectChatFilters } from '../../../../hooks/reducers/useFoldersReducer'
 import useHistoryBack from '../../../../hooks/useHistoryBack';
 import useOldLang from '../../../../hooks/useOldLang';
 
-import AnimatedIcon from '../../../common/AnimatedIcon';
+import AnimatedIconWithPreview from '../../../common/AnimatedIconWithPreview';
 import GroupChatInfo from '../../../common/GroupChatInfo';
 import Icon from '../../../common/icons/Icon';
 import PrivateChatInfo from '../../../common/PrivateChatInfo';
@@ -283,7 +283,7 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
     <div className="settings-fab-wrapper">
       <div className="settings-content no-border custom-scroll">
         <div className="settings-content-header">
-          <AnimatedIcon
+          <AnimatedIconWithPreview
             size={STICKER_SIZE_FOLDER_SETTINGS}
             tgsUrl={LOCAL_TGS_URLS.FoldersNew}
             play={String(state.folderId)}
diff --git a/src/components/left/settings/folders/SettingsFoldersMain.tsx b/src/components/left/settings/folders/SettingsFoldersMain.tsx
index aac8fca66..0c0944794 100644
--- a/src/components/left/settings/folders/SettingsFoldersMain.tsx
+++ b/src/components/left/settings/folders/SettingsFoldersMain.tsx
@@ -21,7 +21,7 @@ import useHistoryBack from '../../../../hooks/useHistoryBack';
 import useOldLang from '../../../../hooks/useOldLang';
 import usePreviousDeprecated from '../../../../hooks/usePreviousDeprecated';
 
-import AnimatedIcon from '../../../common/AnimatedIcon';
+import AnimatedIconWithPreview from '../../../common/AnimatedIconWithPreview';
 import Icon from '../../../common/icons/Icon';
 import Button from '../../../ui/Button';
 import Draggable from '../../../ui/Draggable';
@@ -198,7 +198,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
   return (
     <div className="settings-content no-border custom-scroll">
       <div className="settings-content-header">
-        <AnimatedIcon
+        <AnimatedIconWithPreview
           size={STICKER_SIZE_FOLDER_SETTINGS}
           tgsUrl={LOCAL_TGS_URLS.FoldersAll}
           className="settings-content-icon"
diff --git a/src/components/right/Profile.scss b/src/components/right/Profile.scss
index 036d537e2..50e79ba2b 100644
--- a/src/components/right/Profile.scss
+++ b/src/components/right/Profile.scss
@@ -34,8 +34,15 @@
     }
   }
 
+  .hidden {
+    display: none;
+  }
+
   .FloatingActionButton {
     z-index: 1;
+    &.revealed {
+      transition-delay: 0.2s;
+    }
   }
 }
 
diff --git a/src/components/right/Profile.tsx b/src/components/right/Profile.tsx
index f6d66e0a7..b1eeb7fde 100644
--- a/src/components/right/Profile.tsx
+++ b/src/components/right/Profile.tsx
@@ -110,6 +110,7 @@ type OwnProps = {
   profileState: ProfileState;
   isMobile?: boolean;
   onProfileStateChange: (state: ProfileState) => void;
+  isActive: boolean;
 };
 
 type StateProps = {
@@ -173,6 +174,7 @@ const INTERSECTION_THROTTLE = 500;
 
 const Profile: FC<OwnProps & StateProps> = ({
   chatId,
+  isActive,
   threadId,
   profileState,
   theme,
@@ -826,7 +828,8 @@ const Profile: FC<OwnProps & StateProps> = ({
 
       {canAddMembers && (
         <FloatingActionButton
-          isShown={resultType === 'members'}
+          className={buildClassName(!isActive && 'hidden')}
+          isShown={canRenderContent}
           onClick={handleNewMemberDialogOpen}
           ariaLabel={oldLang('lng_channel_add_users')}
         >
diff --git a/src/components/right/RightColumn.tsx b/src/components/right/RightColumn.tsx
index da1ba39a8..c5c4c16a9 100644
--- a/src/components/right/RightColumn.tsx
+++ b/src/components/right/RightColumn.tsx
@@ -313,6 +313,7 @@ const RightColumn: FC<OwnProps & StateProps> = ({
             threadId={threadId}
             profileState={profileState}
             isMobile={isMobile}
+            isActive={isOpen && isActive}
             onProfileStateChange={setProfileState}
           />
         );
diff --git a/src/components/right/management/ManageDiscussion.tsx b/src/components/right/management/ManageDiscussion.tsx
index 6bc1ea833..c80978b0d 100644
--- a/src/components/right/management/ManageDiscussion.tsx
+++ b/src/components/right/management/ManageDiscussion.tsx
@@ -17,7 +17,7 @@ import useFlag from '../../../hooks/useFlag';
 import useHistoryBack from '../../../hooks/useHistoryBack';
 import useOldLang from '../../../hooks/useOldLang';
 
-import AnimatedIcon from '../../common/AnimatedIcon';
+import AnimatedIconWithPreview from '../../common/AnimatedIconWithPreview';
 import Avatar from '../../common/Avatar';
 import GroupChatInfo from '../../common/GroupChatInfo';
 import NothingFound from '../../common/NothingFound';
@@ -248,7 +248,7 @@ const ManageDiscussion: FC<OwnProps & StateProps> = ({
     <div className="Management">
       <div className="custom-scroll">
         <div className="section">
-          <AnimatedIcon
+          <AnimatedIconWithPreview
             tgsUrl={LOCAL_TGS_URLS.DiscussionGroups}
             size={STICKER_SIZE_DISCUSSION_GROUPS}
             className="section-icon"
diff --git a/src/components/right/management/ManageInvites.tsx b/src/components/right/management/ManageInvites.tsx
index 4dd171973..d1a6c1b31 100644
--- a/src/components/right/management/ManageInvites.tsx
+++ b/src/components/right/management/ManageInvites.tsx
@@ -21,7 +21,7 @@ import useForceUpdate from '../../../hooks/useForceUpdate';
 import useHistoryBack from '../../../hooks/useHistoryBack';
 import useOldLang from '../../../hooks/useOldLang';
 
-import AnimatedIcon from '../../common/AnimatedIcon';
+import AnimatedIconWithPreview from '../../common/AnimatedIconWithPreview';
 import Icon from '../../common/icons/Icon';
 import LinkField from '../../common/LinkField';
 import NothingFound from '../../common/NothingFound';
@@ -274,7 +274,7 @@ const ManageInvites: FC<OwnProps & StateProps> = ({
     <div className="Management ManageInvites">
       <div className="custom-scroll">
         <div className="section">
-          <AnimatedIcon
+          <AnimatedIconWithPreview
             tgsUrl={LOCAL_TGS_URLS.Invite}
             size={STICKER_SIZE_INVITES}
             className="section-icon"
diff --git a/src/components/right/management/ManageJoinRequests.tsx b/src/components/right/management/ManageJoinRequests.tsx
index fc26307dd..5358f55f8 100644
--- a/src/components/right/management/ManageJoinRequests.tsx
+++ b/src/components/right/management/ManageJoinRequests.tsx
@@ -13,7 +13,7 @@ import useFlag from '../../../hooks/useFlag';
 import useHistoryBack from '../../../hooks/useHistoryBack';
 import useOldLang from '../../../hooks/useOldLang';
 
-import AnimatedIcon from '../../common/AnimatedIcon';
+import AnimatedIconWithPreview from '../../common/AnimatedIconWithPreview';
 import Button from '../../ui/Button';
 import ConfirmDialog from '../../ui/ConfirmDialog';
 import Spinner from '../../ui/Spinner';
@@ -68,7 +68,7 @@ const ManageJoinRequests: FC<OwnProps & StateProps> = ({
     <div className="Management ManageJoinRequests">
       <div className="custom-scroll">
         <div className="section">
-          <AnimatedIcon
+          <AnimatedIconWithPreview
             tgsUrl={LOCAL_TGS_URLS.JoinRequest}
             size={STICKER_SIZE_JOIN_REQUESTS}
             className="section-icon"