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,7 +214,12 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
         </div>
       )}
 
-      <div dir={lang.isRtl ? 'rtl' : undefined} className="reactor-list-wrapper">
+      <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"
@@ -268,6 +287,7 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
               )}
             </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;