[C-1201,C-1202] Improve search results rendering and perf (#2050)

packages/common/src/store/pages/search-results/reducer.ts

@@ -31,27 +31,34 @@ const calculateNewSearchResults = (
       ? action.searchText
       : action.tag
   const prevStateQuery = state.searchText
+  const isTagSearch = action.type === 'SEARCH/FETCH_SEARCH_PAGE_TAGS_SUCCEEDED'
+  const keepPrevResult =
+    query === prevStateQuery && isTagSearch === state.isTagSearch
+
+  const newState = keepPrevResult
+    ? { ...state, status: Status.SUCCESS }
+    : {
+        ...initialState,
+        status: Status.SUCCESS
+      }
 
-  const newState = {
-    ...initialState,
-    status: Status.SUCCESS
-  }
   if (action.results) {
     newState.searchText = query
     newState.isTagSearch =
       action.type === 'SEARCH/FETCH_SEARCH_PAGE_TAGS_SUCCEEDED'
-    const keepPrevResult =
-      query === prevStateQuery && newState.isTagSearch === state.isTagSearch
-    newState.trackIds =
-      action.results.tracks || (keepPrevResult ? state.trackIds : undefined)
-    newState.albumIds =
-      action.results.albums || (keepPrevResult ? state.albumIds : undefined)
-    newState.playlistIds =
-      action.results.playlists ||
-      (keepPrevResult ? state.playlistIds : undefined)
-    newState.artistIds =
-      action.results.users || (keepPrevResult ? state.artistIds : undefined)
-    newState.tracks = keepPrevResult ? state.tracks : initialState.tracks
+    const { tracks, albums, playlists, users } = action.results
+    if (tracks) {
+      newState.trackIds = tracks
+    }
+    if (albums) {
+      newState.albumIds = albums
+    }
+    if (playlists) {
+      newState.playlistIds = playlists
+    }
+    if (users) {
+      newState.artistIds = users
+    }
   }
   return newState
 }

packages/mobile/src/components/collection-list/CollectionList.tsx

@@ -10,7 +10,7 @@ type ListProps = Omit<
 >
 
 type CollectionListProps = {
-  collection: UserCollection[]
+  collection: UserCollection[] | undefined
 } & ListProps
 
 export const CollectionList = (props: CollectionListProps) => {

packages/mobile/src/screens/search-results-screen/tabs/AlbumsTab.tsx

@@ -1,21 +1,27 @@
-import { SearchKind, searchResultsPageSelectors } from '@audius/common'
-import { useSelector } from 'react-redux'
+import type { CommonState } from '@audius/common'
+import { useProxySelector, SearchKind } from '@audius/common'
 
 import { CollectionList } from 'app/components/collection-list/CollectionList'
 
 import { SearchResultsTab } from './SearchResultsTab'
 import { useFetchTabResultsEffect } from './useFetchTabResultsEffect'
 
-const { makeGetSearchAlbums } = searchResultsPageSelectors
-
-const getSearchAlbums = makeGetSearchAlbums()
+const selectSearchAlbums = (state: CommonState) =>
+  state.pages.searchResults.albumIds
+    ?.map((albumId) => {
+      const album = state.collections.entries[albumId].metadata
+      const user = state.users.entries[album.playlist_owner_id].metadata
+      const trackCount = album.playlist_contents.track_ids.length
+      return { ...album, user, trackCount }
+    })
+    .filter((album) => album.user && !album.user.is_deactivated)
 
 export const AlbumsTab = () => {
-  const albums = useSelector(getSearchAlbums)
+  const albums = useProxySelector(selectSearchAlbums, [])
   useFetchTabResultsEffect(SearchKind.ALBUMS)
 
   return (
-    <SearchResultsTab noResults={albums.length === 0}>
+    <SearchResultsTab noResults={albums && albums.length === 0}>
       <CollectionList listKey='search-albums' collection={albums} />
     </SearchResultsTab>
   )

packages/mobile/src/screens/search-results-screen/tabs/PlaylistsTab.tsx

@@ -1,20 +1,27 @@
-import { SearchKind, searchResultsPageSelectors } from '@audius/common'
-import { useSelector } from 'react-redux'
+import type { CommonState } from '@audius/common'
+import { useProxySelector, SearchKind } from '@audius/common'
 
 import { CollectionList } from 'app/components/collection-list/CollectionList'
 
 import { SearchResultsTab } from './SearchResultsTab'
 import { useFetchTabResultsEffect } from './useFetchTabResultsEffect'
-const { makeGetSearchPlaylists } = searchResultsPageSelectors
 
-const getSearchPlaylists = makeGetSearchPlaylists()
+const selectSearchPlaylists = (state: CommonState) =>
+  state.pages.searchResults.playlistIds
+    ?.map((playlistId) => {
+      const playlist = state.collections.entries[playlistId].metadata
+      const user = state.users.entries[playlist.playlist_owner_id].metadata
+      const trackCount = playlist.playlist_contents.track_ids.length
+      return { ...playlist, user, trackCount }
+    })
+    .filter((playlist) => playlist.user && !playlist.user.is_deactivated)
 
 export const PlaylistsTab = () => {
-  const playlists = useSelector(getSearchPlaylists)
+  const playlists = useProxySelector(selectSearchPlaylists, [])
   useFetchTabResultsEffect(SearchKind.PLAYLISTS)
 
   return (
-    <SearchResultsTab noResults={playlists.length === 0}>
+    <SearchResultsTab noResults={playlists && playlists.length === 0}>
       <CollectionList listKey='search-playlists' collection={playlists} />
     </SearchResultsTab>
   )

packages/mobile/src/screens/search-results-screen/tabs/ProfilesTab.tsx

@@ -1,22 +1,24 @@
-import { SearchKind, searchResultsPageSelectors } from '@audius/common'
-import { useSelector } from 'react-redux'
+import type { CommonState } from '@audius/common'
+import { SearchKind, useProxySelector } from '@audius/common'
 
 import { ArtistCard } from 'app/components/artist-card'
 import { CardList } from 'app/components/core'
 
 import { SearchResultsTab } from './SearchResultsTab'
 import { useFetchTabResultsEffect } from './useFetchTabResultsEffect'
-const { makeGetSearchArtists } = searchResultsPageSelectors
 
-const getSearchUsers = makeGetSearchArtists()
+const selectSearchUsers = (state: CommonState) =>
+  state.pages.searchResults.artistIds
+    ?.map((artistId) => state.users.entries[artistId].metadata)
+    .filter((artist) => !artist.is_deactivated)
 
 export const ProfilesTab = () => {
-  const users = useSelector(getSearchUsers)
+  const users = useProxySelector(selectSearchUsers, [])
 
   useFetchTabResultsEffect(SearchKind.USERS)
 
   return (
-    <SearchResultsTab noResults={users.length === 0}>
+    <SearchResultsTab noResults={users && users.length === 0}>
       <CardList
         data={users}
         renderItem={({ item }) => <ArtistCard artist={item} />}

packages/mobile/src/screens/search-results-screen/tabs/SearchResultsTab.tsx

@@ -22,7 +22,8 @@ export const SearchResultsTab = (props: SearchResultsTabProps) => {
     <WithLoader
       loading={Boolean(
         searchStatus === Status.LOADING ||
-          (status === Status.LOADING && noResults)
+          (status === Status.LOADING && noResults) ||
+          noResults === undefined
       )}
     >
       {noResults ? <EmptyResults /> : <>{children}</>}