From aadd9439aa0270770a70a680fdded01ebd373cc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 19 Sep 2024 15:15:02 +0200
Subject: [PATCH] pl-fe: move ChatList to @tanstack/virtual, some fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../pl-fe/src/components/scrollable-list.tsx  | 32 +++----
 .../features/chats/components/chat-list.tsx   | 90 ++++++++++---------
 .../components/chat-message-list.test.tsx     | 11 ++-
 .../components/chat-page-sidebar.tsx          |  9 +-
 .../chats/components/chat-pane/chat-pane.tsx  | 10 +--
 .../src/features/landing-timeline/index.tsx   |  2 +-
 .../src/features/notifications/index.tsx      | 10 +--
 .../steps/suggested-accounts-step.tsx         |  8 +-
 .../src/features/status/components/thread.tsx |  3 +-
 .../modals/familiar-followers-modal.tsx       |  6 +-
 .../ui/components/modals/favourites-modal.tsx |  6 +-
 .../ui/components/modals/reactions-modal.tsx  |  6 +-
 .../ui/components/modals/reblogs-modal.tsx    |  7 +-
 .../src/features/ui/components/timeline.tsx   |  9 +-
 14 files changed, 108 insertions(+), 101 deletions(-)

diff --git a/packages/pl-fe/src/components/scrollable-list.tsx b/packages/pl-fe/src/components/scrollable-list.tsx
index b1c4f9e25..45d195924 100644
--- a/packages/pl-fe/src/components/scrollable-list.tsx
+++ b/packages/pl-fe/src/components/scrollable-list.tsx
@@ -8,6 +8,15 @@ import { useSettings } from 'pl-fe/hooks';
 import LoadMore from './load-more';
 import { Card, Spinner } from './ui';
 
+type IScrollableListWindowScroll = {
+  /** Whether to use the window to scroll the content instead of the container. */
+  useWindowScroll?: true;
+} | {
+  /** Whether to use the window to scroll the content instead of the container. */
+  useWindowScroll: false;
+  parentRef: React.RefObject<HTMLElement>;
+};
+
 interface IScrollableList {
   /** Pagination callback when the end of the list is reached. */
   onLoadMore?: () => void;
@@ -27,10 +36,8 @@ interface IScrollableList {
   emptyMessageCard?: boolean;
   /** Scrollable content. */
   children: Iterable<React.ReactNode>;
-  /** Callback when the list is scrolled to the top. */
-  onScrollToTop?: () => void;
   /** Callback when the list is scrolled. */
-  onScroll?: () => void;
+  onScroll?: (startIndex?: number, endIndex?: number) => void;
   /** Placeholder component to render while loading. */
   placeholderComponent?: React.ComponentType | React.NamedExoticComponent;
   /** Number of placeholders to render while loading. */
@@ -47,15 +54,13 @@ interface IScrollableList {
   id?: string;
   /** CSS styles on the parent element. */
   style?: React.CSSProperties;
-  /** Whether to use the window to scroll the content instead of the container. */
-  useWindowScroll?: boolean;
   /** Initial item index to scroll to. */
   initialIndex?: number;
   /** Estimated size for items */
   estimatedSize?: number;
 }
 
-const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(({
+const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList & IScrollableListWindowScroll>(({
   prepend = null,
   alwaysPrepend,
   children,
@@ -64,7 +69,6 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(
   emptyMessageCard = true,
   showLoading,
   onScroll,
-  onScrollToTop,
   onLoadMore,
   className,
   listClassName,
@@ -76,8 +80,8 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(
   placeholderCount = 0,
   initialIndex = 0,
   style = {},
-  useWindowScroll = true,
   estimatedSize = 300,
+  ...props
 }, ref) => {
   const { autoloadMore } = useSettings();
 
@@ -90,15 +94,15 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(
 
   const data = showPlaceholder ? Array(placeholderCount).fill('') : elements;
 
-  const virtualizer = useWindowScroll ? useWindowVirtualizer({
+  const virtualizer = props.useWindowScroll === false ? useVirtualizer({
     count: data.length + (hasMore ? 1 : 0),
     overscan: 3,
     estimateSize: () => estimatedSize,
-  }) : useVirtualizer({
+    getScrollElement: () => props.parentRef.current || parentRef.current,
+  }) : useWindowVirtualizer({
     count: data.length + (hasMore ? 1 : 0),
     overscan: 3,
     estimateSize: () => estimatedSize,
-    getScrollElement: () => parentRef.current,
   });
 
   useEffect(() => {
@@ -114,10 +118,8 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(
   }, [showLoading, initialIndex]);
 
   useEffect(() => {
-    if (range?.startIndex === 0) {
-      onScrollToTop?.();
-    } else onScroll?.();
-  }, [range?.startIndex === 0]);
+    onScroll?.(range?.startIndex, range?.endIndex);
+  }, [range?.startIndex, range?.endIndex]);
 
   useEffect(() => {
     if (onLoadMore && range?.endIndex === data.length && !showLoading && autoloadMore && hasMore) {
diff --git a/packages/pl-fe/src/features/chats/components/chat-list.tsx b/packages/pl-fe/src/features/chats/components/chat-list.tsx
index 25ce691bf..d6f83feb3 100644
--- a/packages/pl-fe/src/features/chats/components/chat-list.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-list.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import React, { useRef, useState } from 'react';
-import { Virtuoso } from 'react-virtuoso';
+import React, { useState } from 'react';
 
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
-import { Spinner, Stack } from 'pl-fe/components/ui';
+import ScrollableList from 'pl-fe/components/scrollable-list';
+import { Stack } from 'pl-fe/components/ui';
 import PlaceholderChat from 'pl-fe/features/placeholder/components/placeholder-chat';
 import { useChats } from 'pl-fe/queries/chats';
 
@@ -11,12 +11,11 @@ import ChatListItem from './chat-list-item';
 
 interface IChatList {
   onClickChat: (chat: any) => void;
-  useWindowScroll?: boolean;
+  parentRef: React.RefObject<HTMLElement>;
+  topOffset: number;
 }
 
-const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
-  const chatListRef = useRef(null);
-
+const ChatList: React.FC<IChatList> = ({ onClickChat, parentRef, topOffset }) => {
   const { chatsQuery: { data: chats, isFetching, hasNextPage, fetchNextPage, refetch } } = useChats();
 
   const [isNearBottom, setNearBottom] = useState<boolean>(false);
@@ -45,43 +44,48 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
   };
 
   return (
-    <div className='relative h-full'>
-      <PullToRefresh onRefresh={handleRefresh}>
-        <Virtuoso
-          ref={chatListRef}
-          atTopStateChange={(atTop) => setNearTop(atTop)}
-          atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
-          useWindowScroll={useWindowScroll}
-          data={chats}
-          endReached={handleLoadMore}
-          itemContent={(_index, chat) => (
-            <div className='px-2'>
-              <ChatListItem chat={chat} onClick={onClickChat} />
-            </div>
-          )}
-          components={{
-            ScrollSeekPlaceholder: () => <PlaceholderChat />,
-            Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
-            EmptyPlaceholder: renderEmpty,
-          }}
-        />
-      </PullToRefresh>
+    <>
+      <div className='relative h-full'>
+        <PullToRefresh onRefresh={handleRefresh}>
+          <ScrollableList
+            onScroll={(top, bottom) => {
+              setNearTop(top === 0);
+              setNearBottom(bottom === chats?.length);
+            }}
+            itemClassName='px-2'
+            emptyMessage={renderEmpty()}
+            placeholderComponent={PlaceholderChat}
+            placeholderCount={3}
+            hasMore={hasNextPage}
+            onLoadMore={handleLoadMore}
+            estimatedSize={64}
+            useWindowScroll={false}
+            parentRef={parentRef}
+            loadMoreClassName='mx-4 mb-4'
+          >
+            {(chats || []).map(chat => (
+              <ChatListItem key={chat.id} chat={chat} onClick={onClickChat} />
+            ))}
+          </ScrollableList>
+        </PullToRefresh>
 
-      <>
-        <div
-          className={clsx('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
-            'opacity-0': isNearTop,
-            'opacity-100 black:opacity-50': !isNearTop,
-          })}
-        />
-        <div
-          className={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 dark:from-gray-900', {
-            'opacity-0': isNearBottom,
-            'opacity-100 black:opacity-50': !isNearBottom,
-          })}
-        />
-      </>
-    </div>
+      </div>
+      <div
+        className={clsx('pointer-events-none absolute inset-x-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 black:from-black dark:from-gray-900', {
+          'opacity-0': isNearTop,
+          'opacity-100 black:opacity-50': !isNearTop,
+        })}
+        style={{
+          top: topOffset,
+        }}
+      />
+      <div
+        className={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 black:from-black dark:from-gray-900', {
+          'opacity-0': isNearBottom,
+          'opacity-100 black:opacity-50': !isNearBottom,
+        })}
+      />
+    </>
   );
 };
 
diff --git a/packages/pl-fe/src/features/chats/components/chat-message-list.test.tsx b/packages/pl-fe/src/features/chats/components/chat-message-list.test.tsx
index bbd210b3f..b83fef0ff 100644
--- a/packages/pl-fe/src/features/chats/components/chat-message-list.test.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-message-list.test.tsx
@@ -1,6 +1,5 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { VirtuosoMockContext } from 'react-virtuoso';
 
 import { __stub } from 'pl-fe/api';
 import { ChatContext } from 'pl-fe/contexts/chat-context';
@@ -62,11 +61,11 @@ const store = rootState
   .set('instance', buildInstance({ version: '3.4.1 (compatible; TruthSocial 1.0.0+unreleased)' }));
 
 const renderComponentWithChatContext = () => render(
-  <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
-    <ChatContext.Provider value={{ chat }}>
-      <ChatMessageList chat={chat} />
-    </ChatContext.Provider>
-  </VirtuosoMockContext.Provider>,
+  // <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
+  <ChatContext.Provider value={{ chat }}>
+    <ChatMessageList chat={chat} />
+  </ChatContext.Provider>,
+  // </VirtuosoMockContext.Provider>,
   undefined,
   store,
 );
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index 460d3a428..4c7a0551f 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
@@ -15,6 +15,7 @@ const messages = defineMessages({
 const ChatPageSidebar = () => {
   const intl = useIntl();
   const history = useHistory();
+  const listRef = useRef<HTMLDivElement>(null);
 
   const handleClickChat = (chat: Chat) => {
     history.push(`/chats/${chat.id}`);
@@ -29,7 +30,7 @@ const ChatPageSidebar = () => {
   };
 
   return (
-    <Stack space={4} className='h-full'>
+    <Stack space={4} className='h-full relative'>
       <Stack space={4} className='px-4 pt-6'>
         <HStack alignItems='center' justifyContent='between'>
           <CardTitle title={intl.formatMessage(messages.title)} />
@@ -50,8 +51,8 @@ const ChatPageSidebar = () => {
         </HStack>
       </Stack>
 
-      <Stack className='h-full grow'>
-        <ChatList onClickChat={handleClickChat} />
+      <Stack className='h-full grow overflow-auto' ref={listRef}>
+        <ChatList onClickChat={handleClickChat} parentRef={listRef} topOffset={68} />
       </Stack>
     </Stack>
   );
diff --git a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx
index 408b9c3f6..f9bfbce78 100644
--- a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Stack } from 'pl-fe/components/ui';
@@ -19,6 +19,8 @@ import Blankslate from './blankslate';
 import type { Chat } from 'pl-api';
 
 const ChatPane = () => {
+  const ref = useRef<HTMLDivElement>(null);
+
   const { unreadChatsCount } = useStatContext();
 
   const { screen, changeScreen, isOpen, toggleChatPane } = useChatContext();
@@ -31,11 +33,9 @@ const ChatPane = () => {
   const renderBody = () => {
     if (Number(chats?.length) > 0 || isLoading) {
       return (
-        <Stack space={4} className='h-full grow'>
+        <Stack space={4} className='h-full grow overflow-auto' ref={ref}>
           {(Number(chats?.length) > 0 || isLoading) ? (
-            <ChatList
-              onClickChat={handleClickChat}
-            />
+            <ChatList onClickChat={handleClickChat} parentRef={ref} topOffset={64} />
           ) : (
             <EmptyResultsBlankslate />
           )}
diff --git a/packages/pl-fe/src/features/landing-timeline/index.tsx b/packages/pl-fe/src/features/landing-timeline/index.tsx
index dc2ac1934..5e5bf9664 100644
--- a/packages/pl-fe/src/features/landing-timeline/index.tsx
+++ b/packages/pl-fe/src/features/landing-timeline/index.tsx
@@ -48,7 +48,7 @@ const LandingTimeline = () => {
       {timelineEnabled ? (
         <PullToRefresh onRefresh={handleRefresh}>
           <Timeline
-            className='black:p-0 black:sm:p-4'
+            listClassName='black:p-0 black:sm:p-4'
             loadMoreClassName='black:sm:mx-4'
             scrollKey={`${timelineId}_timeline`}
             timelineId={timelineId}
diff --git a/packages/pl-fe/src/features/notifications/index.tsx b/packages/pl-fe/src/features/notifications/index.tsx
index 9513fb68a..bb8a2a4f0 100644
--- a/packages/pl-fe/src/features/notifications/index.tsx
+++ b/packages/pl-fe/src/features/notifications/index.tsx
@@ -56,12 +56,8 @@ const Notifications = () => {
     dispatch(expandNotifications({ maxId: last && last.id }));
   }, 300, { leading: true }), [notifications]);
 
-  const handleScrollToTop = useCallback(debounce(() => {
-    dispatch(scrollTopNotifications(true));
-  }, 100), []);
-
-  const handleScroll = useCallback(debounce(() => {
-    dispatch(scrollTopNotifications(false));
+  const handleScroll = useCallback(debounce((startIndex?: number) => {
+    dispatch(scrollTopNotifications(startIndex === 0));
   }, 100), []);
 
   const handleMoveUp = (id: string) => {
@@ -93,7 +89,6 @@ const Notifications = () => {
 
     return () => {
       handleLoadOlder.cancel();
-      handleScrollToTop.cancel();
       handleScroll.cancel();
       dispatch(scrollTopNotifications(false));
     };
@@ -135,7 +130,6 @@ const Notifications = () => {
       placeholderComponent={PlaceholderNotification}
       placeholderCount={20}
       onLoadMore={handleLoadOlder}
-      onScrollToTop={handleScrollToTop}
       onScroll={handleScroll}
       listClassName={clsx('divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800', {
         'animate-pulse': notifications.size === 0,
diff --git a/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx b/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx
index 92f56aa88..3cc57026b 100644
--- a/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { BigCard } from 'pl-fe/components/big-card';
@@ -8,6 +8,7 @@ import AccountContainer from 'pl-fe/containers/account-container';
 import { useOnboardingSuggestions } from 'pl-fe/queries/suggestions';
 
 const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
+  const parentRef = useRef<HTMLDivElement>(null);
   const { data, isFetching } = useOnboardingSuggestions();
 
   const renderSuggestions = () => {
@@ -16,11 +17,12 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
     }
 
     return (
-      <div className='flex flex-col sm:pb-10 sm:pt-4'>
+      <div className='flex flex-col sm:pb-10 sm:pt-4' ref={parentRef}>
         <ScrollableList
           isLoading={isFetching}
-          useWindowScroll={false}
           style={{ height: 320 }}
+          useWindowScroll={false}
+          parentRef={parentRef}
         >
           {data.map((suggestion) => (
             <div key={suggestion.account.id} className='py-2'>
diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx
index c425c2041..6eea98040 100644
--- a/packages/pl-fe/src/features/status/components/thread.tsx
+++ b/packages/pl-fe/src/features/status/components/thread.tsx
@@ -400,13 +400,14 @@ const Thread: React.FC<IThread> = ({
           ref={virtualizer}
           placeholderComponent={() => <PlaceholderStatus variant='slim' />}
           initialIndex={initialIndex}
-          useWindowScroll={useWindowScroll}
           itemClassName={itemClassName}
           listClassName={
             clsx({
               'h-full': !useWindowScroll,
             })
           }
+          useWindowScroll={useWindowScroll}
+          parentRef={node}
         >
           {children}
         </ScrollableList>
diff --git a/packages/pl-fe/src/features/ui/components/modals/familiar-followers-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/familiar-followers-modal.tsx
index a0cbb22fa..48575c01e 100644
--- a/packages/pl-fe/src/features/ui/components/modals/familiar-followers-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/familiar-followers-modal.tsx
@@ -1,5 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React from 'react';
+import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'pl-fe/components/scrollable-list';
@@ -17,6 +17,7 @@ interface FamiliarFollowersModalProps {
 }
 
 const FamiliarFollowersModal: React.FC<BaseModalProps & FamiliarFollowersModalProps> = ({ accountId, onClose }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
   const account = useAppSelector(state => getAccount(state, accountId));
   const familiarFollowerIds: ImmutableOrderedSet<string> = useAppSelector(state => state.user_lists.familiar_followers.get(accountId)?.items || ImmutableOrderedSet());
 
@@ -36,8 +37,9 @@ const FamiliarFollowersModal: React.FC<BaseModalProps & FamiliarFollowersModalPr
         emptyMessage={emptyMessage}
         itemClassName='pb-3'
         style={{ height: 'calc(80vh - 88px)' }}
-        useWindowScroll={false}
         estimatedSize={42}
+        useWindowScroll={false}
+        parentRef={modalRef}
       >
         {familiarFollowerIds.map(id =>
           <AccountContainer key={id} id={id} />,
diff --git a/packages/pl-fe/src/features/ui/components/modals/favourites-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/favourites-modal.tsx
index 0cde9ca40..13320f881 100644
--- a/packages/pl-fe/src/features/ui/components/modals/favourites-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/favourites-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchFavourites, expandFavourites } from 'pl-fe/actions/interactions';
@@ -14,6 +14,7 @@ interface FavouritesModalProps {
 }
 
 const FavouritesModal: React.FC<BaseModalProps & FavouritesModalProps> = ({ onClose, statusId }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
   const dispatch = useAppDispatch();
 
   const accountIds = useAppSelector((state) => state.user_lists.favourited_by.get(statusId)?.items);
@@ -50,10 +51,11 @@ const FavouritesModal: React.FC<BaseModalProps & FavouritesModalProps> = ({ onCl
         listClassName='max-w-full'
         itemClassName='pb-3'
         style={{ height: 'calc(80vh - 88px)' }}
-        useWindowScroll={false}
         onLoadMore={handleLoadMore}
         hasMore={!!next}
         estimatedSize={42}
+        useWindowScroll={false}
+        parentRef={modalRef}
       >
         {accountIds.map(id =>
           <AccountContainer key={id} id={id} />,
diff --git a/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx
index 20912f078..d73cb69a6 100644
--- a/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { fetchReactions } from 'pl-fe/actions/interactions';
@@ -28,6 +28,7 @@ interface ReactionsModalProps {
 }
 
 const ReactionsModal: React.FC<BaseModalProps & ReactionsModalProps> = ({ onClose, statusId, reaction: initialReaction }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const [reaction, setReaction] = useState(initialReaction);
@@ -93,8 +94,9 @@ const ReactionsModal: React.FC<BaseModalProps & ReactionsModalProps> = ({ onClos
         listClassName='max-w-full'
         itemClassName='pb-3'
         style={{ height: 'calc(80vh - 88px)' }}
-        useWindowScroll={false}
         estimatedSize={42}
+        useWindowScroll={false}
+        parentRef={modalRef}
       >
         {accounts.map((account) =>
           <AccountContainer key={`${account.id}-${account.reaction}`} id={account.id} emoji={account.reaction} emojiUrl={account.reactionUrl} />,
diff --git a/packages/pl-fe/src/features/ui/components/modals/reblogs-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/reblogs-modal.tsx
index 6031362f2..e0514763f 100644
--- a/packages/pl-fe/src/features/ui/components/modals/reblogs-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/reblogs-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchReblogs, expandReblogs } from 'pl-fe/actions/interactions';
@@ -19,6 +19,7 @@ const ReblogsModal: React.FC<BaseModalProps & ReblogsModalProps> = ({ onClose, s
   const intl = useIntl();
   const accountIds = useAppSelector((state) => state.user_lists.reblogged_by.get(statusId)?.items);
   const next = useAppSelector((state) => state.user_lists.reblogged_by.get(statusId)?.next);
+  const modalRef = useRef<HTMLDivElement>(null);
 
   const fetchData = () => {
     dispatch(fetchReblogs(statusId));
@@ -52,10 +53,11 @@ const ReblogsModal: React.FC<BaseModalProps & ReblogsModalProps> = ({ onClose, s
         listClassName='max-w-full'
         itemClassName='pb-3'
         style={{ height: 'calc(80vh - 88px)' }}
-        useWindowScroll={false}
         onLoadMore={handleLoadMore}
         hasMore={!!next}
         estimatedSize={42}
+        useWindowScroll={false}
+        parentRef={modalRef}
       >
         {accountIds.map((id) =>
           <AccountContainer key={id} id={id} />,
@@ -68,6 +70,7 @@ const ReblogsModal: React.FC<BaseModalProps & ReblogsModalProps> = ({ onClose, s
     <Modal
       title={<FormattedMessage id='column.reblogs' defaultMessage='Reposts' />}
       onClose={onClickClose}
+      ref={modalRef}
     >
       {body}
     </Modal>
diff --git a/packages/pl-fe/src/features/ui/components/timeline.tsx b/packages/pl-fe/src/features/ui/components/timeline.tsx
index c416ba2f4..6c152e3f9 100644
--- a/packages/pl-fe/src/features/ui/components/timeline.tsx
+++ b/packages/pl-fe/src/features/ui/components/timeline.tsx
@@ -44,12 +44,8 @@ const Timeline: React.FC<ITimeline> = ({
     dispatch(dequeueTimeline(timelineId, onLoadMore));
   }, []);
 
-  const handleScrollToTop = useCallback(debounce(() => {
-    dispatch(scrollTopTimeline(timelineId, true));
-  }, 100), [timelineId]);
-
-  const handleScroll = useCallback(debounce(() => {
-    dispatch(scrollTopTimeline(timelineId, false));
+  const handleScroll = useCallback(debounce((startIndex?: number) => {
+    dispatch(scrollTopTimeline(timelineId, startIndex === 0));
   }, 100), [timelineId]);
 
   return (
@@ -65,7 +61,6 @@ const Timeline: React.FC<ITimeline> = ({
 
       <StatusList
         timelineId={timelineId}
-        onScrollToTop={handleScrollToTop}
         onScroll={handleScroll}
         lastStatusId={lastStatusId}
         statusIds={statusIds}