Use ListTile in username/e164 compose

ts/components/conversationList/UsernameSearchResultListItem.tsx

@@ -3,7 +3,10 @@
 
 import React, { useCallback } from 'react';
 
-import { BaseConversationListItem } from './BaseConversationListItem';
+import { SPINNER_CLASS_NAME } from './BaseConversationListItem';
+import { ListTile } from '../ListTile';
+import { Avatar, AvatarSize } from '../Avatar';
+import { Spinner } from '../Spinner';
 
 import type { LocalizerType } from '../../types/Util';
 import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
@@ -55,18 +58,32 @@ export function UsernameSearchResultListItem({
   ]);
 
   return (
-    <BaseConversationListItem
-      acceptedMessageRequest={false}
-      conversationType="direct"
-      headerName={username}
-      i18n={i18n}
-      isMe={false}
-      isSelected={false}
-      isUsernameSearchResult
-      shouldShowSpinner={isFetchingUsername}
-      onClick={boundOnClick}
-      sharedGroupNames={[]}
+    <ListTile
+      leading={
+        <Avatar
+          acceptedMessageRequest={false}
+          conversationType="direct"
+          searchResult
+          i18n={i18n}
+          isMe={false}
+          title={username}
+          size={AvatarSize.THIRTY_TWO}
+          badge={undefined}
+          sharedGroupNames={[]}
+        />
+      }
       title={username}
+      onClick={boundOnClick}
+      trailing={
+        isFetchingUsername ? (
+          <Spinner
+            size="20px"
+            svgSize="small"
+            moduleClassName={SPINNER_CLASS_NAME}
+            direction="on-progress-dialog"
+          />
+        ) : undefined
+      }
     />
   );
 }