pl-fe: Migrate ChatMessageList to @tanstack/virtual

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

packages/pl-fe/src/components/scrollable-list.tsx

@@ -56,8 +56,10 @@ interface IScrollableList {
   style?: React.CSSProperties;
   /** Initial item index to scroll to. */
   initialIndex?: number;
-  /** Estimated size for items */
+  /** Estimated size for items. */
   estimatedSize?: number;
+  /** Align the items to the bottom of the list. */
+  alignToBottom?: boolean;
 }
 
 const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList & IScrollableListWindowScroll>(({
@@ -81,6 +83,7 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList &
   initialIndex = 0,
   style = {},
   estimatedSize = 300,
+  alignToBottom,
   ...props
 }, ref) => {
   const { autoloadMore } = useSettings();
@@ -160,9 +163,9 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList &
 
   const renderItem = (index: number): JSX.Element => {
     const PlaceholderComponent = Placeholder || Spinner;
-    if (index === data.length) return (isLoading) ? <PlaceholderComponent /> : loadMore || <div className='h-4' />;
+    if (alignToBottom && hasMore ? index === 0 : index === data.length) return (isLoading) ? <PlaceholderComponent /> : loadMore || <div className='h-4' />;
     if (showPlaceholder) return <PlaceholderComponent />;
-    return data[index];
+    return data[alignToBottom && hasMore ? index - 1 : index];
   };
 
   const virtualItems = virtualizer.getVirtualItems();

packages/pl-fe/src/features/chats/components/chat-message-list.test.tsx

@@ -61,11 +61,9 @@ 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>,
   undefined,
   store,
 );

packages/pl-fe/src/features/chats/components/chat-message-list.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
-import { Avatar, Button, Divider, Spinner, Stack, Text } from 'pl-fe/components/ui';
+import ScrollableList from 'pl-fe/components/scrollable-list';
+import { Avatar, Button, Divider, Stack, Text } from 'pl-fe/components/ui';
 import PlaceholderChatMessage from 'pl-fe/features/placeholder/components/placeholder-chat-message';
 import { useAppSelector } from 'pl-fe/hooks';
 import { useChatActions, useChatMessages } from 'pl-fe/queries/chats';
@@ -36,25 +36,25 @@ const timeChange = (prev: Pick<ChatMessageEntity, 'created_at'>, curr: Pick<Chat
 
 const START_INDEX = 10000;
 
-const List: Components['List'] = React.forwardRef((props, ref) => {
+// const List: Components['List'] = React.forwardRef((props, ref) => {
-  const { context, ...rest } = props;
+//   const { context, ...rest } = props;
-  return <div ref={ref} {...rest} className='mb-2' />;
+//   return <div ref={ref} {...rest} className='mb-2' />;
-});
+// });
 
-const Scroller: Components['Scroller'] = React.forwardRef((props, ref) => {
+// const Scroller: Components['Scroller'] = React.forwardRef((props, ref) => {
-  const { style, context, ...rest } = props;
+//   const { style, context, ...rest } = props;
 
-  return (
+//   return (
-    <div
+//     <div
-      {...rest}
+//       {...rest}
-      ref={ref}
+//       ref={ref}
-      style={{
+//       style={{
-        ...style,
+//         ...style,
-        scrollbarGutter: 'stable',
+//         scrollbarGutter: 'stable',
-      }}
+//       }}
-    />
+//     />
-  );
+//   );
-});
+// });
 
 interface IChatMessageList {
   /** Chat the messages are being rendered from. */
@@ -65,7 +65,7 @@ interface IChatMessageList {
 const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   const intl = useIntl();
 
-  const node = useRef<VirtuosoHandle>(null);
+  const parentRef = useRef<HTMLDivElement>(null);
   const [firstItemIndex, setFirstItemIndex] = useState(START_INDEX - 20);
 
   const { markChatAsRead } = useChatActions(chat.id);
@@ -137,16 +137,16 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   };
   const cachedChatMessages = buildCachedMessages();
 
-  const initialScrollPositionProps = useMemo(() => {
+  // const initialScrollPositionProps = useMemo(() => {
-    if (process.env.NODE_ENV === 'test') {
+  //   if (process.env.NODE_ENV === 'test') {
-      return {};
+  //     return {};
-    }
+  //   }
 
-    return {
+  //   return {
-      initialTopMostItemIndex: cachedChatMessages.length - 1,
+  //     initialTopMostItemIndex: cachedChatMessages.length - 1,
-      firstItemIndex: Math.max(0, firstItemIndex),
+  //     firstItemIndex: Math.max(0, firstItemIndex),
-    };
+  //   };
-  }, [cachedChatMessages.length, firstItemIndex]);
+  // }, [cachedChatMessages.length, firstItemIndex]);
 
   const handleStartReached = useCallback(() => {
     if (hasNextPage && !isFetching) {
@@ -231,14 +231,30 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   }
 
   return (
-    <div className='flex h-full grow flex-col space-y-6'>
+    <div className='flex h-full grow flex-col space-y-6 overflow-auto' style={{ scrollbarGutter: 'auto' }}>
-      <div className='flex grow flex-col justify-end'>
+      <div className='flex grow flex-col justify-end' ref={parentRef}>
-        <Virtuoso
+        <ScrollableList
-          ref={node}
+          listClassName='mb-2'
+          loadMoreClassName='w-fit mx-auto mb-2'
+          alignToBottom
+          initialIndex={cachedChatMessages.length - 1}
+          hasMore={hasNextPage}
+          isLoading={isFetching}
+          showLoading={isFetching && !isFetchingNextPage}
+          onLoadMore={handleStartReached}
+          useWindowScroll={false}
+          parentRef={parentRef}
+        >
+          {cachedChatMessages.map((chatMessage, index) => {
+            if (chatMessage.type === 'divider') {
+              return renderDivider(index, chatMessage.text);
+            } else {
+              return <ChatMessage chat={chat} chatMessage={chatMessage} />;
+            }
+          })}
+        </ScrollableList>
+        {/* <Virtuoso
           alignToBottom
-          {...initialScrollPositionProps}
-          data={cachedChatMessages}
-          startReached={handleStartReached}
           followOutput='auto'
           itemContent={(index, chatMessage) => {
             if (chatMessage.type === 'divider') {
@@ -258,7 +274,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
               return null;
             },
           }}
-        />
+        /> */}
       </div>
     </div>
   );

packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { VirtuosoMockContext } from 'react-virtuoso';
 
 import { __stub } from 'pl-fe/api';
 import { ChatContext } from 'pl-fe/contexts/chat-context';
@@ -10,13 +9,11 @@ import { render, screen, waitFor } from 'pl-fe/jest/test-helpers';
 import ChatPane from './chat-pane';
 
 const renderComponentWithChatContext = (store = {}) => render(
-  <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
   <StatProvider>
     <ChatContext.Provider value={{ isOpen: true }}>
       <ChatPane />
     </ChatContext.Provider>
-    </StatProvider>
+  </StatProvider>,
-  </VirtuosoMockContext.Provider>,
   undefined,
   store,
 );

packages/pl-fe/src/features/chats/components/chat-search/chat-search.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 { ChatProvider } from 'pl-fe/contexts/chat-context';
@@ -9,11 +8,9 @@ import { render, screen, waitFor } from 'pl-fe/jest/test-helpers';
 import ChatSearch from './chat-search';
 
 const renderComponent = () => render(
-  <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
   <ChatProvider>
     <ChatSearch />
   </ChatProvider>,
-  </VirtuosoMockContext.Provider>,
 );
 
 describe('<ChatSearch />', () => {

packages/pl-fe/src/features/chats/components/chat-search/chat-search.tsx

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
@@ -25,9 +25,9 @@ interface IChatSearch {
   isMainPage?: boolean;
 }
 
-const ChatSearch = (props: IChatSearch) => {
+const ChatSearch: React.FC<IChatSearch> = ({ isMainPage = false }) => {
+  const parentRef = useRef<HTMLDivElement>(null);
   const intl = useIntl();
-  const { isMainPage = false } = props;
 
   const debounce = useDebounce;
   const history = useHistory();
@@ -70,6 +70,7 @@ const ChatSearch = (props: IChatSearch) => {
             handleClickOnSearchResult.mutate(id);
             clearValue();
           }}
+          parentRef={parentRef}
         />
       );
     } else if (hasSearchValue && !hasSearchResults && !isFetching) {
@@ -109,7 +110,7 @@ const ChatSearch = (props: IChatSearch) => {
         />
       </div>
 
-      <Stack className='h-full grow overflow-auto'>
+      <Stack className='h-full grow overflow-auto' ref={parentRef}>
         {renderBody()}
       </Stack>
     </Stack>

packages/pl-fe/src/features/chats/components/chat-search/results.tsx

@@ -11,9 +11,10 @@ import type { Account } from 'pl-api';
 interface IResults {
   accountSearchResult: ReturnType<typeof useAccountSearch>;
   onSelect(id: string): void;
+  parentRef: React.RefObject<HTMLElement>;
 }
 
-const Results = ({ accountSearchResult, onSelect }: IResults) => {
+const Results = ({ accountSearchResult, onSelect, parentRef }: IResults) => {
   const { data: accounts, isFetching, hasNextPage, fetchNextPage } = accountSearchResult;
 
   const [isNearBottom, setNearBottom] = useState<boolean>(false);
@@ -47,8 +48,9 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
     </button>
   ), []);
 
+  // <div className='relative grow'>
   return (
-    <div className='relative grow'>
+    <>
       <ScrollableList
         itemClassName='px-2'
         loadMoreClassName='mx-4 mb-4'
@@ -59,25 +61,25 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
         isLoading={isFetching}
         hasMore={hasNextPage}
         onLoadMore={handleLoadMore}
+        useWindowScroll={false}
+        parentRef={parentRef}
       >
         {(accounts || []).map((chat) => renderAccount(chat))}
       </ScrollableList>
 
-      <>
       <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', {
+        className={clsx('pointer-events-none absolute inset-x-0 top-[58px] 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': !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', {
+        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': !isNearBottom,
         })}
       />
     </>
-    </div>
   );
 };
 

packages/pl-fe/src/features/chats/components/chat.tsx

@@ -161,7 +161,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
   return (
     <Stack className={clsx('flex grow overflow-hidden', className)} onMouseOver={handleMouseOver}>
       <div className='flex h-full grow justify-center overflow-hidden'>
-        <ChatMessageList chat={chat} />
+        <ChatMessageList key={chat.id} chat={chat} />
       </div>
 
       <ChatComposer

packages/pl-fe/src/polyfills.ts

@@ -1,8 +1,7 @@
 import 'intersection-observer';
 import ResizeObserver from 'resize-observer-polyfill';
 
-// Needed by Virtuoso
+// Needed by @tanstack/virtual, I guess
-// https://github.com/petyosi/react-virtuoso#browser-support
 if (!window.ResizeObserver) {
   window.ResizeObserver = ResizeObserver;
 }

packages/pl-fe/src/sentry.ts

@@ -27,10 +27,6 @@ const startSentry = async (dsn: string): Promise<void> => {
       // localForage error in FireFox private browsing mode (which doesn't support IndexedDB).
       // We only use IndexedDB as a cache, so we can safely ignore the error.
       'No available storage method found',
-      // Virtuoso throws these errors, but it is a false-positive.
-      // https://github.com/petyosi/react-virtuoso/issues/254
-      'ResizeObserver loop completed with undelivered notifications.',
-      'ResizeObserver loop limit exceeded',
     ],
     denyUrls: [
       // Browser extensions.

packages/pl-fe/src/styles/basics.scss

@@ -21,12 +21,6 @@ noscript {
   @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
 }
 
-// Virtuoso empty placeholder fix.
-// https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506
-div[data-viewport-type='window'] {
-  @apply static #{!important};
-}
-
 body.system-font,
 body.system-font .font-sans {
   font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;