feat: migrate ThreadList to PaginatedVirtualList

apps/meteor/client/views/room/contextualBar/Threads/ThreadList.spec.tsx

@@ -1,6 +1,5 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { render, screen } from '@testing-library/react';
-import { VirtuosoMockContext } from 'react-virtuoso';
 
 import ThreadList from './ThreadList';
 import { createFakeRoom } from '../../../../../tests/mocks/data';
@@ -28,9 +27,6 @@ describe('ThreadList Component', () => {
 					'/v1/chat.getThreadsList',
 					jest.fn().mockRejectedValue({ success: false, error: 'error-not-allowed', errorType: 'error-not-allowed' }),
 				)
-				.wrap((children) => (
-					<VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>{children}</VirtuosoMockContext.Provider>
-				))
 				.build(),
 		});
 		expect(await screen.findByText('error-not-allowed')).toBeInTheDocument();

apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx

@@ -1,8 +1,7 @@
 import type { IMessage, IThreadMainMessage } from '@rocket.chat/core-typings';
 import { Box, Icon, TextInput, Select, Callout, Throbber } from '@rocket.chat/fuselage';
-import { useResizeObserver, useAutoFocus, useLocalStorage, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useAutoFocus, useLocalStorage, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import {
-	VirtualizedScrollbars,
 	ContextualbarClose,
 	ContextualbarContent,
 	ContextualbarHeader,
@@ -15,10 +14,10 @@ import {
 import { useTranslation, useUserId, useRoomToolbox } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent } from 'react';
 import { useMemo, useState, useCallback, useId } from 'react';
-import { Virtuoso } from 'react-virtuoso';
 
 import ThreadListItem from './components/ThreadListItem';
 import { useThreadsList } from './hooks/useThreadsList';
+import { PaginatedVirtualList } from '../../../../components/PaginatedVirtualList';
 import ResultsLiveRegion from '../../../../components/ResultsLiveRegion';
 import { getErrorMessage } from '../../../../lib/errorHandling';
 import { useRoom, useRoomSubscription } from '../../contexts/RoomContext';
@@ -37,10 +36,6 @@ const ThreadList = () => {
 		closeTab();
 	}, [closeTab]);
 
-	const { ref, contentBoxSize: { inlineSize = 378, blockSize = 1 } = {} } = useResizeObserver<HTMLElement>({
-		debounceDelay: 200,
-	});
-
 	const autoFocusRef = useAutoFocus<HTMLInputElement>(true);
 
 	const [searchText, setSearchText] = useState('');
@@ -145,7 +140,7 @@ const ThreadList = () => {
 					/>
 				</Box>
 			</ContextualbarSection>
-			<ContextualbarContent paddingInline={0} ref={ref}>
+			<ContextualbarContent paddingInline={0}>
 				<ResultsLiveRegion shouldAnnounce={isSuccess} itemCount={itemCount} />
 				{isPending && (
 					<Box pi={24} pb={12}>
@@ -161,17 +156,13 @@ const ThreadList = () => {
 					<Box id={threadListId} w='full' h='full' overflow='hidden' flexShrink={1}>
 						{items.length === 0 && <ContextualbarEmptyContent title={t('No_Threads')} />}
 						{items.length > 0 && (
-							<VirtualizedScrollbars>
-								<Virtuoso
-									style={{
-										height: blockSize,
-										width: inlineSize,
-									}}
+							<Box h='full' w='full' style={{ minHeight: 0 }}>
+								<PaginatedVirtualList
+									items={items}
 									totalCount={itemCount}
-									endReached={() => fetchNextPage()}
 									overscan={25}
-									data={items}
-									itemContent={(_index, data: IThreadMainMessage) => (
+									onEndReached={isPending ? undefined : fetchNextPage}
+									renderItem={(data: IThreadMainMessage) => (
 										<ThreadListItem
 											thread={data}
 											unread={subscription?.tunread ?? []}
@@ -181,7 +172,7 @@ const ThreadList = () => {
 										/>
 									)}
 								/>
-							</VirtualizedScrollbars>
+							</Box>
 						)}
 					</Box>
 				)}