Forum Panel: Optimize some animations

src/components/left/main/Badge.tsx

@@ -18,10 +18,11 @@ type OwnProps = {
   isPinned?: boolean;
   isMuted?: boolean;
   shouldShowOnlyMostImportant?: boolean;
+  forceHidden?: boolean;
 };
 
 const Badge: FC<OwnProps> = ({
-  topic, chat, isPinned, isMuted, shouldShowOnlyMostImportant, wasTopicOpened,
+  topic, chat, isPinned, isMuted, shouldShowOnlyMostImportant, wasTopicOpened, forceHidden,
 }) => {
   const {
     unreadMentionsCount = 0, unreadReactionsCount = 0,
@@ -50,7 +51,7 @@ const Badge: FC<OwnProps> = ({
 
   const hasUnreadMark = topic ? false : chat.hasUnreadMark;
 
-  const isShown = Boolean(
+  const isShown = !forceHidden && Boolean(
     unreadCount || unreadMentionsCount || hasUnreadMark || isPinned || unreadReactionsCount
     || isTopicUnopened,
   );

src/components/left/main/Chat.scss

@@ -15,12 +15,12 @@
 
   &.animate-opacity {
     will-change: opacity;
-    transition: opacity 0.2s ease-out;
+    transition: opacity 250ms ease;
   }
 
   &.animate-transform {
     will-change: transform;
-    transition: transform 0.2s ease-out;
+    transition: transform 250ms ease;
   }
 
   &:hover,
@@ -175,28 +175,19 @@
     right: 0.5rem;
     z-index: 2;
 
-    transition-duration: 0.25s;
-    transition-timing-function: cubic-bezier(0.16,1.25,0.64,1);
-    transition-property: opacity, transform;
-    opacity: 0;
-    transform: scale(0);
-
     --outline-color: var(--color-background);
 
     .Badge {
       box-shadow: 0 0 0 2px var(--outline-color);
     }
-  }
 
-  .status-badge-wrapper-visible {
+    .Badge-transition {
-    opacity: 1;
+      transition: opacity 250ms ease, transform 250ms ease; // Same as Forum Panel
-    transform: scale(1);
+    }
   }
 
   .info {
-    transition-duration: 0.25s;
+    transition: opacity 250ms ease, transform 250ms ease; // Same as Forum Panel
-    transition-property: ease-in-out;
-    transition-property: opacity, transform;
 
     .subtitle {
       margin-top: -0.125rem;

src/components/left/main/Chat.tsx

@@ -1,6 +1,6 @@
 import type { FC } from '../../../lib/teact/teact';
 import React, {
-  memo, useCallback, useEffect, useRef,
+  memo, useCallback, useEffect, useLayoutEffect, useRef,
 } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
@@ -234,7 +234,7 @@ const Chat: FC<OwnProps & StateProps> = ({
   }
 
   // Animate changing to smaller chat size when navigating to/from forum topic list
-  useEffect(() => {
+  useLayoutEffect(() => {
     const current = ref.current;
 
     if (current && isAnimatingRef.current && isForumPanelActive !== prevIsForumPanelActive) {
@@ -288,12 +288,8 @@ const Chat: FC<OwnProps & StateProps> = ({
           withVideo
           observeIntersection={observeIntersection}
         />
-        <div className={buildClassName(
+        <div className="status-badge-wrapper">
-          'status-badge-wrapper',
+          <Badge chat={chat} isMuted={isMuted} shouldShowOnlyMostImportant forceHidden={!isForumPanelActive} />
-          isForumPanelActive && 'status-badge-wrapper-visible',
-        )}
-        >
-          <Badge chat={chat} isMuted={isMuted} shouldShowOnlyMostImportant />
         </div>
         {chat.isCallActive && chat.isCallNotEmpty && (
           <ChatCallStatus isSelected={isSelected} isActive={animationLevel !== 0} />

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

@@ -18,7 +18,7 @@
     border-right: 1px solid var(--color-borders);
   }
 
-  transition: transform var(--slide-transition);
+  transition: transform 250ms ease; // Same as `.Chat > .info`
   transform: translate3d(100%, 0, 0);
 
   :global(.chat-list) {
@@ -39,15 +39,17 @@
   position: static !important;
 }
 
-.border-bottom {
+.notch {
   width: 100%;
   height: 0;
-  transition: 0.1s ease-out border-color;
+  border-bottom: 0.0625rem solid var(--color-borders);
-  border-bottom: 0.0625rem solid transparent;
+
+  transition: 0.1s ease opacity;
+  opacity: 0;
 }
 
-.scrolled .border-bottom {
+.scrolled .notch {
-  border-color: var(--color-borders);
+  opacity: 1;
 }
 
 .scroll-top-handler {

src/components/left/main/ForumPanel.tsx

@@ -13,7 +13,6 @@ import {
 } from '../../../config';
 import { selectChat, selectCurrentMessageList } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
-import { fastRaf } from '../../../util/schedulers';
 import { getOrderedTopics } from '../../../global/helpers';
 import captureEscKeyListener from '../../../util/captureEscKeyListener';
 import { waitForTransitionEnd } from '../../../util/cssAnimationEndListeners';
@@ -135,16 +134,13 @@ const ForumPanel: FC<OwnProps & StateProps> = ({
         dispatchHeavyAnimationStop();
       });
 
-      // For performance reasons, we delay animation of the topic list panel to the next animation frame
+      if (isVisible) {
-      fastRaf(() => {
+        shouldRenderRef.current = true;
-        if (isVisible) {
+        ref.current!.style.transform = 'none';
-          shouldRenderRef.current = true;
+      } else {
-          ref.current!.style.transform = 'none';
+        shouldRenderRef.current = false;
-        } else {
+        ref.current!.style.transform = '';
-          shouldRenderRef.current = false;
+      }
-          ref.current!.style.transform = '';
-        }
-      });
     }
   }, [isVisible, prevIsVisible]);
 
@@ -212,7 +208,7 @@ const ForumPanel: FC<OwnProps & StateProps> = ({
 
       {chat && <GroupCallTopPane chatId={chat.id} hasPinnedOffset={false} className={styles.groupCall} />}
 
-      <div className={styles.borderBottom} />
+      <div className={styles.notch} />
 
       <InfiniteScroll
         className="chat-list custom-scroll"

src/components/left/main/LeftMain.scss

@@ -17,7 +17,7 @@
     flex-direction: column;
     overflow: hidden;
 
-    transition: 0.25s ease-out transform;
+    transition: transform 250ms ease; // Same as Forum Panel
 
     &--tabs-hidden {
       transform: translateY(-3.125rem);

src/components/left/main/LeftMainHeader.scss

@@ -102,9 +102,7 @@
   }
 
   .SearchInput {
-    transition-duration: 0.25s;
+    transition: opacity 250ms ease; // Same as Forum Panel
-    transition-timing-function: ease-out;
-    transition-property: opacity;
 
     &--hidden {
       opacity: 0;

src/components/ui/ShowTransition.tsx

@@ -26,15 +26,16 @@ const ShowTransition: FC<OwnProps> = ({
   children,
   noCloseTransition,
 }) => {
+  const prevIsOpen = usePrevious(isOpen);
+  const prevChildren = usePrevious(children);
+  const fromChildrenRef = useRef<React.ReactNode>();
+  const isFirstRender = prevIsOpen === undefined;
   const {
     shouldRender,
     transitionClassNames,
   } = useShowTransition(
-    isOpen && !isHidden, undefined, undefined, isCustom ? false : undefined, noCloseTransition,
+    isOpen && !isHidden, undefined, isFirstRender, isCustom ? false : undefined, noCloseTransition,
   );
-  const prevIsOpen = usePrevious(isOpen);
-  const prevChildren = usePrevious(children);
-  const fromChildrenRef = useRef<React.ReactNode>();
 
   if (prevIsOpen && !isOpen) {
     fromChildrenRef.current = prevChildren;