Forum Panel: Disable transitions if animation level is at min (#2821)

src/components/left/main/Archive.module.scss

@@ -52,6 +52,10 @@
 
 .info {
   transition: opacity 0.3s ease, transform var(--layer-transition);
+
+  :global(body.animation-level-0) & {
+    transition: none;
+  }
 }
 
 .icon {

src/components/left/main/Chat.scss

@@ -156,6 +156,10 @@
       transform: translateX(-0.375rem) scaleY(0.5);
       transition: transform var(--layer-transition);
 
+      body.animation-level-0 & {
+        transition: none;
+      }
+
       background: var(--color-primary);
       z-index: 1;
 
@@ -206,12 +210,20 @@
 
     .Badge-transition {
       transition: opacity var(--layer-transition), transform var(--layer-transition);
+
+      body.animation-level-0 & {
+        transition: none;
+      }
     }
   }
 
   .info {
     transition: opacity 300ms ease, transform var(--layer-transition);
 
+    body.animation-level-0 & {
+      transition: none;
+    }
+
     .title .custom-emoji {
       color: var(--color-primary);
     }

src/components/left/main/ForumPanel.module.scss

@@ -25,6 +25,10 @@
   transition: transform var(--layer-transition);
   transform: translate3d(100%, 0, 0);
 
+  &.no-animation {
+    transition: none;
+  }
+
   :global(.chat-list) {
     position: relative;
     overflow-x: hidden;

src/components/left/main/ForumPanel.tsx

@@ -9,7 +9,7 @@ import { MAIN_THREAD_ID } from '../../../api/types';
 
 import {
   GENERAL_TOPIC_ID,
-  TOPICS_SLICE, TOPIC_HEIGHT_PX, TOPIC_LIST_SENSITIVE_AREA,
+  TOPICS_SLICE, TOPIC_HEIGHT_PX, TOPIC_LIST_SENSITIVE_AREA, ANIMATION_LEVEL_MIN,
 } from '../../../config';
 import { IS_TOUCH_ENV } from '../../../util/environment';
 import {
@@ -52,6 +52,7 @@ type StateProps = {
   chat?: ApiChat;
   currentTopicId?: number;
   lastSyncTime?: number;
+  animationLevel?: number;
 };
 
 const INTERSECTION_THROTTLE = 200;
@@ -64,6 +65,7 @@ const ForumPanel: FC<OwnProps & StateProps> = ({
   lastSyncTime,
   onTopicSearch,
   onCloseAnimationEnd,
+  animationLevel,
 }) => {
   const {
     closeForumPanel, openChatWithInfo, loadTopics,
@@ -91,6 +93,12 @@ const ForumPanel: FC<OwnProps & StateProps> = ({
     closeForumPanel();
   }, [closeForumPanel]);
 
+  useEffect(() => {
+    if (animationLevel === ANIMATION_LEVEL_MIN && !isOpen) {
+      onCloseAnimationEnd?.();
+    }
+  }, [animationLevel, isOpen, onCloseAnimationEnd]);
+
   const handleToggleChatInfo = useCallback(() => {
     if (!chat) return;
     openChatWithInfo({ id: chat.id, shouldReplaceHistory: true });
@@ -196,6 +204,7 @@ const ForumPanel: FC<OwnProps & StateProps> = ({
         styles.root,
         isScrolled && styles.scrolled,
         lang.isRtl && styles.rtl,
+        animationLevel === ANIMATION_LEVEL_MIN && styles.noAnimation,
       )}
       onTransitionEnd={!isOpen ? onCloseAnimationEnd : undefined}
     >
@@ -277,6 +286,7 @@ export default memo(withGlobal<OwnProps>(
       chat,
       lastSyncTime: global.lastSyncTime,
       currentTopicId: chatId === currentChatId ? currentThreadId : undefined,
+      animationLevel: global.settings.byKey.animationLevel,
     };
   },
 )(ForumPanel));

src/styles/_common.scss

@@ -124,6 +124,10 @@
 
   .Avatar {
     transition: transform var(--layer-transition);
+
+    body.animation-level-0 & {
+      transition: none;
+    }
   }
 
   .ListItem {