Reactor List Modal: Fix animation (#6525)

src/components/middle/ReactorListModal.scss

@@ -14,6 +14,10 @@
     }
   }
 
+  .modal-dialog {
+    overflow: clip;
+  }
+
   .modal-content {
     overflow: hidden;
     display: flex;
@@ -24,9 +28,9 @@
   }
 
   .reactor-list-wrapper {
+    position: relative;
     flex-grow: 1;
     min-height: 0;
-    border-top: 1px solid var(--color-borders);
   }
 
   .confirm-dialog-button {
@@ -53,8 +57,10 @@
   .reactor-list {
     overflow: auto;
     overflow-x: hidden;
+
     max-height: 100%;
-    padding: 0 0.5rem;
+    padding-top: 0.5rem;
+    padding-inline: 0.5rem;
   }
 
   .reactors-list-item {

src/components/middle/ReactorListModal.tsx

@@ -26,6 +26,7 @@ import useInfiniteScroll from '../../hooks/useInfiniteScroll';
 import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
+import useScrollNotch from '../../hooks/useScrollNotch';
 
 import Avatar from '../common/Avatar';
 import FullNameTitle from '../common/FullNameTitle';
@@ -37,6 +38,7 @@ import InfiniteScroll from '../ui/InfiniteScroll';
 import ListItem from '../ui/ListItem';
 import Loading from '../ui/Loading';
 import Modal from '../ui/Modal';
+import Transition from '../ui/Transition';
 
 import './ReactorListModal.scss';
 
@@ -81,6 +83,7 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
     && reactions.results.length > 1;
   const chatIdRef = useRef<string>();
   const reactionsRef = useRef<HTMLDivElement>();
+  const containerRef = useRef<HTMLDivElement>();
 
   useHorizontalScroll(reactionsRef, !canShowFilters || !isOpen);
 
@@ -128,6 +131,12 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
     return uniqueReactions;
   }, [reactors]);
 
+  const contentActiveKey = useMemo(() => {
+    if (!chosenTab) return 0;
+    const index = allReactions.findIndex((r) => isSameReaction(r, chosenTab));
+    return index + 1;
+  }, [chosenTab, allReactions]);
+
   const peerIds = useMemo(() => {
     if (chosenTab) {
       return reactors?.reactions
@@ -144,6 +153,11 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
     handleLoadMore, peerIds, reactors && reactors.nextOffset === undefined,
   );
 
+  useScrollNotch({
+    containerRef,
+    selector: '.reactor-list',
+  }, [contentActiveKey, isOpen]);
+
   useEffect(() => {
     getMore?.({ direction: LoadMoreDirection.Backwards });
   }, [getMore]);
@@ -200,74 +214,80 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
         </div>
       )}
 
-      <div dir={lang.isRtl ? 'rtl' : undefined} className="reactor-list-wrapper">
-        {viewportIds?.length ? (
-          <InfiniteScroll
-            className="reactor-list custom-scroll"
-            items={viewportIds}
-            onLoadMore={getMore}
-          >
-            {viewportIds?.flatMap(
-              (peerId) => {
-                const peer = usersById[peerId] || chatsById[peerId];
+      <div
+        ref={containerRef}
+        dir={lang.isRtl ? 'rtl' : undefined}
+        className="reactor-list-wrapper"
+      >
+        <Transition activeKey={contentActiveKey} name="slide">
+          {viewportIds?.length ? (
+            <InfiniteScroll
+              className="reactor-list custom-scroll"
+              items={viewportIds}
+              onLoadMore={getMore}
+            >
+              {viewportIds?.flatMap(
+                (peerId) => {
+                  const peer = usersById[peerId] || chatsById[peerId];
 
-                const peerReactions = reactors?.reactions.filter((reactor) => reactor.peerId === peerId);
-                const items: React.ReactNode[] = [];
-                const seenByUser = seenByDates?.[peerId];
+                  const peerReactions = reactors?.reactions.filter((reactor) => reactor.peerId === peerId);
+                  const items: React.ReactNode[] = [];
+                  const seenByUser = seenByDates?.[peerId];
 
-                peerReactions?.forEach((r) => {
-                  if (chosenTab && !isSameReaction(r.reaction, chosenTab)) return;
+                  peerReactions?.forEach((r) => {
+                    if (chosenTab && !isSameReaction(r.reaction, chosenTab)) return;
 
-                  items.push(
-                    <ListItem
-                      key={`${peerId}-${getReactionKey(r.reaction)}`}
-                      className="chat-item-clickable reactors-list-item"
+                    items.push(
+                      <ListItem
+                        key={`${peerId}-${getReactionKey(r.reaction)}`}
+                        className="chat-item-clickable reactors-list-item"
 
-                      onClick={() => handleClick(peerId)}
-                    >
-                      <Avatar peer={peer} size="medium" />
-                      <div className="info">
-                        <FullNameTitle peer={peer} withEmojiStatus />
-                        <span className="status" dir="auto">
-                          <Icon name="heart-outline" className="status-icon" />
-                          {formatDateAtTime(oldLang, r.addedDate * 1000)}
-                        </span>
-                      </div>
-                      {r.reaction && (
-                        <ReactionStaticEmoji
-                          className="reactors-list-emoji"
-                          reaction={r.reaction}
-                          availableReactions={availableReactions}
-                          size={DEFAULT_REACTION_SIZE}
+                        onClick={() => handleClick(peerId)}
+                      >
+                        <Avatar peer={peer} size="medium" />
+                        <div className="info">
+                          <FullNameTitle peer={peer} withEmojiStatus />
+                          <span className="status" dir="auto">
+                            <Icon name="heart-outline" className="status-icon" />
+                            {formatDateAtTime(oldLang, r.addedDate * 1000)}
+                          </span>
+                        </div>
+                        {r.reaction && (
+                          <ReactionStaticEmoji
+                            className="reactors-list-emoji"
+                            reaction={r.reaction}
+                            availableReactions={availableReactions}
+                            size={DEFAULT_REACTION_SIZE}
+                          />
+                        )}
+                      </ListItem>,
+                    );
+                  });
+
+                  if (!chosenTab && !peerReactions?.length) {
+                    items.push(
+                      <ListItem
+                        key={`${peerId}-seen-by`}
+                        className="chat-item-clickable scroll-item small-icon"
+
+                        onClick={() => handleClick(peerId)}
+                      >
+                        <PrivateChatInfo
+                          userId={peerId}
+                          noStatusOrTyping
+                          avatarSize="medium"
+                          status={seenByUser ? formatDateAtTime(oldLang, seenByUser * 1000) : undefined}
+                          statusIcon="message-read"
                         />
-                      )}
-                    </ListItem>,
-                  );
-                });
-
-                if (!chosenTab && !peerReactions?.length) {
-                  items.push(
-                    <ListItem
-                      key={`${peerId}-seen-by`}
-                      className="chat-item-clickable scroll-item small-icon"
-
-                      onClick={() => handleClick(peerId)}
-                    >
-                      <PrivateChatInfo
-                        userId={peerId}
-                        noStatusOrTyping
-                        avatarSize="medium"
-                        status={seenByUser ? formatDateAtTime(oldLang, seenByUser * 1000) : undefined}
-                        statusIcon="message-read"
-                      />
-                    </ListItem>,
-                  );
-                }
-                return items;
-              },
-            )}
-          </InfiniteScroll>
-        ) : <Loading />}
+                      </ListItem>,
+                    );
+                  }
+                  return items;
+                },
+              )}
+            </InfiniteScroll>
+          ) : <Loading />}
+        </Transition>
       </div>
     </Modal>
   );

src/styles/_variables.scss

@@ -268,6 +268,7 @@ $color-message-story-mention-to: #74bcff;
   --z-left-header: 11;
   --z-middle-header: 11;
   --z-middle-footer: 11;
+  --z-scroll-notch: 10;
   --z-story-ribbon: 10;
   --z-country-code-input-group: 10;
   --z-message-select-control: 9;

src/styles/index.scss

@@ -376,7 +376,7 @@ body:not(.is-ios) {
     content: "";
 
     position: absolute;
-    z-index: 1;
+    z-index: var(--z-scroll-notch);
     top: 0;
     left: 0;