pl-fe: move chat search results to @tanstack/virtual

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

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

@@ -86,7 +86,7 @@ const ChatSearch = (props: IChatSearch) => {
   };
 
   return (
-    <Stack space={4} className='h-full grow'>
+    <Stack space={4} className='h-full relative overflow-auto'>
       <div className='px-4'>
         <Input
           data-testid='search'
@@ -109,7 +109,7 @@ const ChatSearch = (props: IChatSearch) => {
         />
       </div>
 
-      <Stack className='grow'>
+      <Stack className='h-full grow overflow-auto'>
         {renderBody()}
       </Stack>
     </Stack>

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

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
-import { Virtuoso } from 'react-virtuoso';
 
+import ScrollableList from 'pl-fe/components/scrollable-list';
 import { Avatar, HStack, Stack, Text } from 'pl-fe/components/ui';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import useAccountSearch from 'pl-fe/queries/search';
@@ -25,7 +25,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
     }
   };
 
-  const renderAccount = useCallback((_index: number, account: Account) => (
+  const renderAccount = useCallback((account: Account) => (
     <button
       key={account.id}
       type='button'
@@ -49,17 +49,19 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
 
   return (
     <div className='relative grow'>
-      <Virtuoso
-        data={accounts}
-        itemContent={(index, chat) => (
-          <div className='px-2'>
-            {renderAccount(index, chat)}
-          </div>
-        )}
-        endReached={handleLoadMore}
-        atTopStateChange={(atTop) => setNearTop(atTop)}
-        atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
-      />
+      <ScrollableList
+        itemClassName='px-2'
+        loadMoreClassName='mx-4 mb-4'
+        onScroll={(startIndex, endIndex) => {
+          setNearTop(startIndex === 0);
+          setNearBottom(endIndex === accounts?.length);
+        }}
+        isLoading={isFetching}
+        hasMore={hasNextPage}
+        onLoadMore={handleLoadMore}
+      >
+        {(accounts || []).map((chat) => renderAccount(chat))}
+      </ScrollableList>
 
       <>
         <div

packages/pl-fe/src/queries/search.ts

@@ -11,18 +11,22 @@ const useAccountSearch = (q: string) => {
   const getAccountSearch = async(q: string, pageParam?: Pick<PaginatedResponse<Account>, 'next'>): Promise<PaginatedResponse<Account>> => {
     if (pageParam?.next) return pageParam.next();
 
-    const response = await client.accounts.searchAccounts(q, {
-      limit: 10,
-      following: true,
-      offset: 0,
-    });
+    const _getAccountSearch = async (offset = 0) => {
+      const response = await client.accounts.searchAccounts(q, {
+        limit: 10,
+        following: true,
+        offset: offset,
+      });
 
-    return {
-      previous: null,
-      next: null,
-      items: response,
-      partial: false,
+      return {
+        previous: null,
+        next: response.length ? () => _getAccountSearch(offset + 10) : null,
+        items: response,
+        partial: false,
+      };
     };
+
+    return _getAccountSearch(0);
   };
 
   const queryInfo = useInfiniteQuery({