pl-fe: Replace virtuoso with tanstack virtual for scrollable list

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/features/ui/components/modals/birthdays-modal.tsx

@@ -24,10 +24,10 @@ const BirthdaysModal = ({ onClose }: BaseModalProps) => {
 
     body = (
       <ScrollableList
-        scrollKey='birthdays'
         emptyMessage={emptyMessage}
         listClassName='max-w-full'
         itemClassName='pb-3'
+        estimatedSize={42}
       >
         {accountIds.map(id =>
           <Account key={id} accountId={id} />,

packages/pl-fe/src/features/ui/components/modals/dislikes-modal.tsx

@@ -39,10 +39,10 @@ const DislikesModal: React.FC<BaseModalProps & DislikesModalProps> = ({ onClose,
 
     body = (
       <ScrollableList
-        scrollKey='dislikes'
         emptyMessage={emptyMessage}
         listClassName='max-w-full'
         itemClassName='pb-3'
+        estimatedSize={42}
       >
         {accountIds.map(id =>
           <AccountContainer key={id} id={id} />,

packages/pl-fe/src/features/ui/components/modals/event-participants-modal.tsx

@@ -39,10 +39,10 @@ const EventParticipantsModal: React.FC<BaseModalProps & EventParticipantsModalPr
 
     body = (
       <ScrollableList
-        scrollKey='event_participations'
         emptyMessage={emptyMessage}
         listClassName='max-w-full'
         itemClassName='pb-3'
+        estimatedSize={42}
       >
         {accountIds.map(id =>
           <AccountContainer key={id} id={id} />,

packages/pl-fe/src/features/ui/components/modals/familiar-followers-modal.tsx

@@ -33,11 +33,11 @@ const FamiliarFollowersModal: React.FC<BaseModalProps & FamiliarFollowersModalPr
 
     body = (
       <ScrollableList
-        scrollKey='familiar_followers'
         emptyMessage={emptyMessage}
         itemClassName='pb-3'
         style={{ height: 'calc(80vh - 88px)' }}
         useWindowScroll={false}
+        estimatedSize={42}
       >
         {familiarFollowerIds.map(id =>
           <AccountContainer key={id} id={id} />,

packages/pl-fe/src/features/ui/components/modals/favourites-modal.tsx

@@ -46,7 +46,6 @@ const FavouritesModal: React.FC<BaseModalProps & FavouritesModalProps> = ({ onCl
 
     body = (
       <ScrollableList
-        scrollKey='favourites'
         emptyMessage={emptyMessage}
         listClassName='max-w-full'
         itemClassName='pb-3'
@@ -54,6 +53,7 @@ const FavouritesModal: React.FC<BaseModalProps & FavouritesModalProps> = ({ onCl
         useWindowScroll={false}
         onLoadMore={handleLoadMore}
         hasMore={!!next}
+        estimatedSize={42}
       >
         {accountIds.map(id =>
           <AccountContainer key={id} id={id} />,

packages/pl-fe/src/features/ui/components/modals/mentions-modal.tsx

@@ -42,9 +42,9 @@ const MentionsModal: React.FC<BaseModalProps & MentionsModalProps> = ({ onClose,
   } else {
     body = (
       <ScrollableList
-        scrollKey='mentions'
         listClassName='max-w-full'
         itemClassName='pb-3'
+        estimatedSize={42}
       >
         {accountIds.map(id =>
           <AccountContainer key={id} id={id} />,

packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx

@@ -86,7 +86,6 @@ const ReactionsModal: React.FC<BaseModalProps & ReactionsModalProps> = ({ onClos
     body = (<>
       {reactions.size > 0 && renderFilterBar()}
       <ScrollableList
-        scrollKey='reactions'
         emptyMessage={emptyMessage}
         className={clsx({
           'mt-4': reactions.size > 0,
@@ -95,6 +94,7 @@ const ReactionsModal: React.FC<BaseModalProps & ReactionsModalProps> = ({ onClos
         itemClassName='pb-3'
         style={{ height: 'calc(80vh - 88px)' }}
         useWindowScroll={false}
+        estimatedSize={42}
       >
         {accounts.map((account) =>
           <AccountContainer key={`${account.id}-${account.reaction}`} id={account.id} emoji={account.reaction} emojiUrl={account.reactionUrl} />,

packages/pl-fe/src/features/ui/components/modals/reblogs-modal.tsx

@@ -48,7 +48,6 @@ const ReblogsModal: React.FC<BaseModalProps & ReblogsModalProps> = ({ onClose, s
 
     body = (
       <ScrollableList
-        scrollKey='reblogs'
         emptyMessage={emptyMessage}
         listClassName='max-w-full'
         itemClassName='pb-3'
@@ -56,6 +55,7 @@ const ReblogsModal: React.FC<BaseModalProps & ReblogsModalProps> = ({ onClose, s
         useWindowScroll={false}
         onLoadMore={handleLoadMore}
         hasMore={!!next}
+        estimatedSize={42}
       >
         {accountIds.map((id) =>
           <AccountContainer key={id} id={id} />,

packages/pl-fe/src/features/ui/components/timeline.tsx

@@ -15,6 +15,8 @@ const messages = defineMessages({
 });
 
 interface ITimeline extends Omit<IStatusList, 'statusIds' | 'isLoading' | 'hasMore'> {
+  /** Unique key to preserve the scroll position when navigating back. */
+  scrollKey: string;
   /** ID of the timeline in Redux. */
   timelineId: string;
   /** Settings path to use instead of the timelineId. */