From 8cb6c70a2df827a75965620149f7fdebd4fe1d78 Mon Sep 17 00:00:00 2001
From: Mounir Dhahri <soussouheros@gmail.com>
Date: Wed, 7 Jun 2023 22:11:10 +0200
Subject: [PATCH] chore: use collapsible tab views inside profile tab (#8820)

* refactor: remove setJSX from Profile Tab

* refactor: use palette sticky tabs inside my c

* chore: remove visual clues related code

* feat(tabs): Add tab notification support to MyCollection (#8823)

* feat(notifications): add tab notification support

* fix(indicators): make positioning right

* fix(myc): use screen component

---------

Co-authored-by: Christopher Pappas <damassi.pappas@gmail.com>
---
 .secrets.baseline                             |  4 +-
 .../StickyTabPagePlaceholder.tsx              | 16 ----
 src/app/Scenes/ArtworkLists/ArtworkLists.tsx  | 20 +++--
 src/app/Scenes/Favorites/FavoriteArtworks.tsx | 49 +++++++-----
 .../Components/MyCollectionSearchBar.tsx      | 23 +-----
 .../Components/MyCollectionStickyHeader.tsx   | 62 ++++++---------
 .../MyCollection/MyCollection.tests.tsx       |  2 -
 src/app/Scenes/MyCollection/MyCollection.tsx  | 76 +++++++-----------
 .../MyCollection/MyCollectionArtworks.tsx     | 45 +----------
 .../MyCollectionArtworkUploadMessages.tsx     |  2 +-
 ...AuctionResultsForArtistsYouCollectRail.tsx |  4 +-
 .../Insights/MedianAuctionPriceRail.tsx       |  2 +
 .../Screens/Insights/MyCollectionInsights.tsx | 63 +++++++--------
 ...ProfileHeaderMyCollectionAndSavedWorks.tsx | 78 +++++++++----------
 14 files changed, 172 insertions(+), 274 deletions(-)
 delete mode 100644 src/app/Components/StickyTabPage/StickyTabPagePlaceholder.tsx

diff --git a/.secrets.baseline b/.secrets.baseline
index 19e29418def..c6ecb500fdb 100644
--- a/.secrets.baseline
+++ b/.secrets.baseline
@@ -288,7 +288,7 @@
         "filename": "src/app/Scenes/MyCollection/MyCollection.tests.tsx",
         "hashed_secret": "6414700358f2ae5762917a164e2e30df8783fc4e",
         "is_verified": false,
-        "line_number": 144
+        "line_number": 142
       }
     ],
     "src/app/Scenes/MyCollection/Screens/ArtworkForm/MyCollectionArtworkForm.tests.tsx": [
@@ -1035,5 +1035,5 @@
       }
     ]
   },
-  "generated_at": "2023-05-26T18:47:03Z"
+  "generated_at": "2023-06-06T15:05:27Z"
 }
diff --git a/src/app/Components/StickyTabPage/StickyTabPagePlaceholder.tsx b/src/app/Components/StickyTabPage/StickyTabPagePlaceholder.tsx
deleted file mode 100644
index 65eb9d476c6..00000000000
--- a/src/app/Components/StickyTabPage/StickyTabPagePlaceholder.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Flex, Spinner } from "@artsy/palette-mobile"
-import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
-
-export const StickyTabPagePlaceholder: React.FC = () => {
-  return (
-    <StickyTabPageScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
-      scrollEnabled={false}
-    >
-      <Flex alignItems="center">
-        <Spinner />
-      </Flex>
-    </StickyTabPageScrollView>
-  )
-}
diff --git a/src/app/Scenes/ArtworkLists/ArtworkLists.tsx b/src/app/Scenes/ArtworkLists/ArtworkLists.tsx
index 9092803d424..7d8954108da 100644
--- a/src/app/Scenes/ArtworkLists/ArtworkLists.tsx
+++ b/src/app/Scenes/ArtworkLists/ArtworkLists.tsx
@@ -1,15 +1,13 @@
-import { Flex, Spacer, Spinner, useScreenDimensions, useSpace } from "@artsy/palette-mobile"
+import { Flex, Spacer, Spinner, Tabs, useScreenDimensions, useSpace } from "@artsy/palette-mobile"
 import { ArtworkListsQuery } from "__generated__/ArtworkListsQuery.graphql"
 import { ArtworkLists_collectionsConnection$key } from "__generated__/ArtworkLists_collectionsConnection.graphql"
 import { GenericGridPlaceholder } from "app/Components/ArtworkGrids/GenericGrid"
-import { StickTabPageRefreshControl } from "app/Components/StickyTabPage/StickTabPageRefreshControl"
-import { StickyTabPageFlatList } from "app/Components/StickyTabPage/StickyTabPageFlatList"
-import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
 import { ArtworkListItem } from "app/Scenes/ArtworkLists/ArtworkListItem"
 import { useArtworkListsColCount } from "app/Scenes/ArtworkLists/useArtworkListsColCount"
 import { extractNodes } from "app/utils/extractNodes"
 import { isPad } from "app/utils/hardware"
 import { Suspense, useState } from "react"
+import { RefreshControl } from "react-native"
 import { graphql, useLazyLoadQuery, usePaginationFragment } from "react-relay"
 
 /**
@@ -81,16 +79,16 @@ export const ArtworkLists = () => {
   })
 
   return (
-    <StickyTabPageFlatList
-      contentContainerStyle={{ paddingVertical: space(2) }}
+    <Tabs.FlatList
+      contentContainerStyle={{ padding: space(2) }}
+      style={{ paddingTop: space(2) }}
       data={artworkSections}
+      renderItem={({ item }) => item.content}
       numColumns={artworkListsColCount}
       keyExtractor={(item) => item.key}
       onEndReached={handleLoadMore}
       ListFooterComponent={!!hasNext ? <LoadingIndicator /> : <Spacer x={2} />}
-      refreshControl={
-        <StickTabPageRefreshControl onRefresh={handleRefresh} refreshing={refreshing} />
-      }
+      refreshControl={<RefreshControl onRefresh={handleRefresh} refreshing={refreshing} />}
     />
   )
 }
@@ -113,9 +111,9 @@ export const ArtworkListsPlaceHolder = () => {
   const screen = useScreenDimensions()
   const space = useSpace()
   return (
-    <StickyTabPageScrollView scrollEnabled={false} style={{ paddingTop: space(2) }}>
+    <Tabs.ScrollView scrollEnabled={false} style={{ paddingTop: space(2) }}>
       <GenericGridPlaceholder width={screen.width - space(4)} />
-    </StickyTabPageScrollView>
+    </Tabs.ScrollView>
   )
 }
 
diff --git a/src/app/Scenes/Favorites/FavoriteArtworks.tsx b/src/app/Scenes/Favorites/FavoriteArtworks.tsx
index 60dc2bbc9fd..38ac4051f25 100644
--- a/src/app/Scenes/Favorites/FavoriteArtworks.tsx
+++ b/src/app/Scenes/Favorites/FavoriteArtworks.tsx
@@ -1,10 +1,9 @@
-import { Spacer, useSpace, Button } from "@artsy/palette-mobile"
+import { Button, Spacer, Tabs, useSpace } from "@artsy/palette-mobile"
 import { FavoriteArtworksQuery } from "__generated__/FavoriteArtworksQuery.graphql"
 import { FavoriteArtworks_me$data } from "__generated__/FavoriteArtworks_me.graphql"
 import GenericGrid, { GenericGridPlaceholder } from "app/Components/ArtworkGrids/GenericGrid"
 import { LoadFailureView } from "app/Components/LoadFailureView"
 import { ZeroState } from "app/Components/States/ZeroState"
-import { StickTabPageRefreshControl } from "app/Components/StickyTabPage/StickTabPageRefreshControl"
 import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
 import { PAGE_SIZE } from "app/Components/constants"
 import { navigate } from "app/system/navigation/navigate"
@@ -14,8 +13,8 @@ import { useScreenDimensions } from "app/utils/hooks"
 import { FAVORITE_ARTWORKS_REFRESH_KEY, RefreshEvents } from "app/utils/refreshHelpers"
 import { renderWithPlaceholder } from "app/utils/renderWithPlaceholder"
 import { useEffect, useState } from "react"
-import { Image } from "react-native"
-import { createPaginationContainer, graphql, QueryRenderer, RelayPaginationProp } from "react-relay"
+import { Image, RefreshControl } from "react-native"
+import { QueryRenderer, RelayPaginationProp, createPaginationContainer, graphql } from "react-relay"
 
 interface Props {
   me: FavoriteArtworks_me$data
@@ -74,9 +73,9 @@ const SavedWorks: React.FC<Props> = ({ me, relay, onDataFetching }) => {
 
   if (artworks.length === 0) {
     return (
-      <StickyTabPageScrollView
+      <Tabs.ScrollView
         refreshControl={
-          <StickTabPageRefreshControl refreshing={refreshingFromPull} onRefresh={handleRefresh} />
+          <RefreshControl refreshing={refreshingFromPull} onRefresh={handleRefresh} />
         }
         contentContainerStyle={{ flexGrow: 1, justifyContent: "center", height: "100%" }}
       >
@@ -102,27 +101,35 @@ const SavedWorks: React.FC<Props> = ({ me, relay, onDataFetching }) => {
             </Button>
           }
         />
-      </StickyTabPageScrollView>
+      </Tabs.ScrollView>
     )
   }
 
+  const data = [
+    {
+      content: (
+        <GenericGrid
+          artworks={artworks}
+          isLoading={fetchingMoreData}
+          hidePartner
+          artistNamesTextStyle={{ weight: "regular" }}
+          saleInfoTextStyle={{ weight: "medium", color: "black100" }}
+          width={width - space(2)}
+        />
+      ),
+      key: "grid",
+    },
+  ]
+
   return (
-    <StickyTabPageScrollView
+    <Tabs.FlatList
       contentContainerStyle={{ paddingVertical: space(2) }}
+      data={data}
       onEndReached={loadMore}
-      refreshControl={
-        <StickTabPageRefreshControl refreshing={refreshingFromPull} onRefresh={handleRefresh} />
-      }
-    >
-      <GenericGrid
-        artworks={artworks}
-        isLoading={fetchingMoreData}
-        hidePartner
-        artistNamesTextStyle={{ weight: "regular" }}
-        saleInfoTextStyle={{ weight: "medium", color: "black100" }}
-        width={width - space(2)}
-      />
-    </StickyTabPageScrollView>
+      renderItem={({ item }) => item.content}
+      keyExtractor={({ key }) => key}
+      refreshControl={<RefreshControl refreshing={refreshingFromPull} onRefresh={handleRefresh} />}
+    />
   )
 }
 
diff --git a/src/app/Scenes/MyCollection/Components/MyCollectionSearchBar.tsx b/src/app/Scenes/MyCollection/Components/MyCollectionSearchBar.tsx
index 037e2ff5283..758b264de1f 100644
--- a/src/app/Scenes/MyCollection/Components/MyCollectionSearchBar.tsx
+++ b/src/app/Scenes/MyCollection/Components/MyCollectionSearchBar.tsx
@@ -1,9 +1,8 @@
-import { Flex, useTheme, Text, useSpace } from "@artsy/palette-mobile"
+import { Flex, INPUT_HEIGHT, Text, useSpace, useTheme } from "@artsy/palette-mobile"
 import { GridViewIcon } from "app/Components/Icons/GridViewIcon"
 import { ListViewIcon } from "app/Components/Icons/ListViewIcon"
 import SearchIcon from "app/Components/Icons/SearchIcon"
 import { Input } from "app/Components/Input"
-import { useStickyTabPageContext } from "app/Components/StickyTabPage/StickyTabPageContext"
 import { useAnimatedValue } from "app/Components/StickyTabPage/reanimatedHelpers"
 import { ViewOption } from "app/Scenes/Search/UserPrefsModel"
 import { GlobalStore } from "app/store/GlobalStore"
@@ -40,8 +39,6 @@ export const MyCollectionSearchBar: React.FC<MyCollectionSearchBarProps> = ({
 
   const [value, setValue] = useState(searchString)
 
-  const { staticHeaderHeight } = useStickyTabPageContext()
-
   const viewOptionPreference = GlobalStore.useAppState((state) => state.userPrefs.artworkViewOption)
 
   const [viewOption, setViewOption] = useState(viewOptionPreference)
@@ -61,26 +58,12 @@ export const MyCollectionSearchBar: React.FC<MyCollectionSearchBarProps> = ({
     GlobalStore.actions.userPrefs.setArtworkViewOption(selectedViewOption)
   }
 
-  Animated.useCode(
-    () =>
-      Animated.call(
-        [staticHeaderHeight, hasRunFocusedAnimation],
-        ([, hasFinishedAnimationLoop]) => {
-          if (hasFinishedAnimationLoop) {
-            return
-          }
-          hasRunFocusedAnimation.setValue(new Animated.Value(1))
-        }
-      ),
-    [isFocused]
-  )
-
   useEffect(() => {
     debouncedSetKeywordFilter(value)
   }, [value])
 
   return (
-    <Flex>
+    <Flex height={INPUT_HEIGHT} justifyContent="center">
       {isFocused ? (
         <Flex flexDirection="row" alignItems="center">
           <Input
@@ -123,7 +106,7 @@ export const MyCollectionSearchBar: React.FC<MyCollectionSearchBarProps> = ({
           </TouchableOpacity>
         </Flex>
       ) : (
-        <Flex my={1}>
+        <Flex>
           <Flex flexDirection="row" justifyContent="space-between">
             <Flex flex={1} mr={1} justifyContent="center">
               <TouchableWithoutFeedback
diff --git a/src/app/Scenes/MyCollection/Components/MyCollectionStickyHeader.tsx b/src/app/Scenes/MyCollection/Components/MyCollectionStickyHeader.tsx
index 01a8fac2039..09f10dbe36d 100644
--- a/src/app/Scenes/MyCollection/Components/MyCollectionStickyHeader.tsx
+++ b/src/app/Scenes/MyCollection/Components/MyCollectionStickyHeader.tsx
@@ -43,7 +43,6 @@ interface MyCollectionStickyHeaderProps {
   hasMarketSignals: boolean
   showModal: () => void
   showNewWorksMessage: boolean
-  showSeparator: boolean
 }
 
 export const MyCollectionStickyHeader: React.FC<MyCollectionStickyHeaderProps> = ({
@@ -52,7 +51,6 @@ export const MyCollectionStickyHeader: React.FC<MyCollectionStickyHeaderProps> =
   hasMarketSignals,
   showModal,
   showNewWorksMessage,
-  showSeparator,
 }) => {
   const { showVisualClue } = useVisualClue()
 
@@ -74,9 +72,7 @@ export const MyCollectionStickyHeader: React.FC<MyCollectionStickyHeaderProps> =
           <MainStickyHeader hasArtworks={hasArtworks} />
         </Flex>
       )}
-      {!!showArtworkFilters && (
-        <Filters filtersCount={filtersCount} showModal={showModal} showSeparator={showSeparator} />
-      )}
+      {!!showArtworkFilters && <Filters filtersCount={filtersCount} showModal={showModal} />}
       <Messages
         showNewWorksMessage={showNewWorksMessage}
         showSubmissionMessage={showSubmissionMessage}
@@ -267,42 +263,32 @@ const AnimatedPill: React.FC<{
   )
 }
 
-const Filters = ({
-  filtersCount,
-  showModal,
-  showSeparator,
-}: {
-  filtersCount: number
-  showModal: () => void
-  showSeparator: boolean
-}) => {
+const Filters = ({ filtersCount, showModal }: { filtersCount: number; showModal: () => void }) => {
   const { trackEvent } = useTracking()
 
   return (
-    <ArtworksFilterHeader
-      selectedFiltersCount={filtersCount}
-      onFilterPress={showModal}
-      showSeparator={showSeparator}
-    >
-      <Button
-        data-test-id="add-artwork-button-non-zero-state"
-        haptic
-        onPress={async () => {
-          navigate("my-collection/artworks/new", {
-            passProps: {
-              mode: "add",
-              source: Tab.collection,
-              onSuccess: popToRoot,
-            },
-          })
-          trackEvent(tracks.addCollectedArtwork())
-        }}
-        size="small"
-        variant="fillDark"
-      >
-        Upload Artwork
-      </Button>
-    </ArtworksFilterHeader>
+    <Flex px={2} backgroundColor="white100">
+      <ArtworksFilterHeader selectedFiltersCount={filtersCount} onFilterPress={showModal}>
+        <Button
+          data-test-id="add-artwork-button-non-zero-state"
+          haptic
+          onPress={async () => {
+            navigate("my-collection/artworks/new", {
+              passProps: {
+                mode: "add",
+                source: Tab.collection,
+                onSuccess: popToRoot,
+              },
+            })
+            trackEvent(tracks.addCollectedArtwork())
+          }}
+          size="small"
+          variant="fillDark"
+        >
+          Upload Artwork
+        </Button>
+      </ArtworksFilterHeader>
+    </Flex>
   )
 }
 
diff --git a/src/app/Scenes/MyCollection/MyCollection.tests.tsx b/src/app/Scenes/MyCollection/MyCollection.tests.tsx
index a81e7687547..bf36a993d2e 100644
--- a/src/app/Scenes/MyCollection/MyCollection.tests.tsx
+++ b/src/app/Scenes/MyCollection/MyCollection.tests.tsx
@@ -3,7 +3,6 @@ import { MyCollectionTestsQuery } from "__generated__/MyCollectionTestsQuery.gra
 import { ArtworkFiltersStoreProvider } from "app/Components/ArtworkFilter/ArtworkFilterStore"
 import { InfiniteScrollMyCollectionArtworksGridContainer } from "app/Components/ArtworkGrids/InfiniteScrollArtworksGrid"
 import { StickyTabPage } from "app/Components/StickyTabPage/StickyTabPage"
-import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
 
 import { MyCollectionTabsStoreProvider } from "app/Scenes/MyCollection/State/MyCollectionTabsStore"
 import { Tab } from "app/Scenes/MyProfile/MyProfileHeaderMyCollectionAndSavedWorks"
@@ -106,7 +105,6 @@ describe("MyCollection", () => {
   describe("collection is not empty", () => {
     it("renders without throwing an error", () => {
       const tree = renderWithRelay()
-      expect(tree.UNSAFE_getByType(StickyTabPageScrollView)).toBeDefined()
       expect(tree.UNSAFE_getByType(InfiniteScrollMyCollectionArtworksGridContainer)).toBeDefined()
     })
   })
diff --git a/src/app/Scenes/MyCollection/MyCollection.tsx b/src/app/Scenes/MyCollection/MyCollection.tsx
index bda06f514a9..c2559b8d304 100644
--- a/src/app/Scenes/MyCollection/MyCollection.tsx
+++ b/src/app/Scenes/MyCollection/MyCollection.tsx
@@ -1,5 +1,5 @@
 import { OwnerType } from "@artsy/cohesion"
-import { Button, Flex, Separator, Spacer } from "@artsy/palette-mobile"
+import { Button, Flex, Separator, Spacer, Tabs } from "@artsy/palette-mobile"
 import AsyncStorage from "@react-native-async-storage/async-storage"
 import { InfiniteScrollArtworksGrid_myCollectionConnection$data } from "__generated__/InfiniteScrollArtworksGrid_myCollectionConnection.graphql"
 import { MyCollectionFetchAuctionResultsQuery } from "__generated__/MyCollectionFetchAuctionResultsQuery.graphql"
@@ -9,9 +9,6 @@ import { ArtworkFilterNavigator, FilterModalMode } from "app/Components/ArtworkF
 import { ArtworkFiltersStoreProvider } from "app/Components/ArtworkFilter/ArtworkFilterStore"
 import { useSelectedFiltersCount } from "app/Components/ArtworkFilter/useArtworkFilters"
 import { LoadFailureView } from "app/Components/LoadFailureView"
-import { StickTabPageRefreshControl } from "app/Components/StickyTabPage/StickTabPageRefreshControl"
-import { StickyTabPageFlatListContext } from "app/Components/StickyTabPage/StickyTabPageFlatList"
-import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
 import { useToast } from "app/Components/Toast/toastHook"
 import { PAGE_SIZE } from "app/Components/constants"
 import { MyCollectionCollectedArtists } from "app/Scenes/MyCollection/Components/MyCollectionCollectedArtists"
@@ -40,7 +37,8 @@ import { renderWithPlaceholder } from "app/utils/renderWithPlaceholder"
 import { ProvideScreenTrackingWithCohesionSchema } from "app/utils/track"
 import { screen } from "app/utils/track/helpers"
 import { times } from "lodash"
-import React, { useContext, useEffect, useRef, useState } from "react"
+import React, { useEffect, useState } from "react"
+import { RefreshControl } from "react-native"
 import {
   QueryRenderer,
   RelayPaginationProp,
@@ -65,8 +63,7 @@ const MyCollection: React.FC<{
   const [hasMarketSignals, setHasMarketSignals] = useState(false)
   const [isFilterModalVisible, setIsFilterModalVisible] = useState(false)
   const [isRefreshing, setIsRefreshing] = useState(false)
-  const [showSearchBar, setShowSearchBar] = useState(false)
-  const innerFlatListRef = useRef(null)
+  const [showNewWorksMessage, setShowNewWorksMessage] = useState(false)
 
   const filtersCount = useSelectedFiltersCount()
 
@@ -133,36 +130,21 @@ const MyCollection: React.FC<{
     relay.loadMore(100)
   }, [me?.myCollectionConnection])
 
-  // hack for tests. we should fix that.
-  const setJSX = useContext(StickyTabPageFlatListContext).setJSX
-
-  const showMessages = async () => {
-    const showNewWorksMessage =
+  const checkForNewMessages = async () => {
+    const newWorksMessage =
       me.myCollectionInfo?.includesPurchasedArtworks &&
       !(await AsyncStorage.getItem(HAS_SEEN_MY_COLLECTION_NEW_WORKS_BANNER))
 
-    setJSX(
-      <MyCollectionStickyHeader
-        filtersCount={filtersCount}
-        hasMarketSignals={hasMarketSignals}
-        showModal={() => setIsFilterModalVisible(true)}
-        showNewWorksMessage={!!showNewWorksMessage}
-        showSeparator={!showSearchBar}
-        hasArtworks={artworks.length > 0}
-      />
-    )
+    setShowNewWorksMessage(!!newWorksMessage)
   }
 
   useEffect(() => {
     const renderMessages = enableCollectedArtists ? hasCollectedArtists : artworks.length
 
     if (renderMessages) {
-      showMessages()
-    } else {
-      // remove already set JSX
-      setJSX(null)
+      checkForNewMessages()
     }
-  }, [artworks.length, filtersCount, showSearchBar])
+  }, [artworks.length, filtersCount])
 
   useEffect(() => {
     reInitializeLocalArtworkFilter(artworks)
@@ -176,7 +158,7 @@ const MyCollection: React.FC<{
   // User has no artworks but has manually added collected artists
   if (artworks.length === 0 && hasCollectedArtists) {
     return (
-      <StickyTabPageScrollView>
+      <Tabs.ScrollView>
         <MyCollectionCollectedArtists me={me} />
         {selectedTab === null && (
           <>
@@ -184,36 +166,41 @@ const MyCollection: React.FC<{
             <MyCollectionZeroStateArtworks />
           </>
         )}
-      </StickyTabPageScrollView>
+      </Tabs.ScrollView>
     )
   }
 
   return (
-    <StickyTabPageScrollView
-      contentContainerStyle={{ justifyContent: "flex-start" }}
-      refreshControl={<StickTabPageRefreshControl onRefresh={refetch} refreshing={isRefreshing} />}
-      innerRef={innerFlatListRef}
+    <Tabs.ScrollView
+      contentContainerStyle={{ justifyContent: "flex-start", paddingHorizontal: 0 }}
+      refreshControl={<RefreshControl onRefresh={refetch} refreshing={isRefreshing} />}
       keyboardDismissMode="on-drag"
       keyboardShouldPersistTaps="handled"
-      paddingHorizontal={0}
     >
+      <Tabs.SubTabBar>
+        <MyCollectionStickyHeader
+          filtersCount={filtersCount}
+          hasMarketSignals={hasMarketSignals}
+          showModal={() => setIsFilterModalVisible(true)}
+          showNewWorksMessage={!!showNewWorksMessage}
+          hasArtworks={artworks.length > 0}
+        />
+      </Tabs.SubTabBar>
       <ArtworkFilterNavigator
         visible={isFilterModalVisible}
         mode={FilterModalMode.Custom}
         closeModal={() => setIsFilterModalVisible(false)}
         exitModal={() => setIsFilterModalVisible(false)}
       />
+
+      <Spacer y={1} />
+
       {(selectedTab === null || selectedTab === "Artists") && enableCollectedArtists ? (
         <MyCollectionCollectedArtists me={me} />
       ) : null}
 
       {selectedTab === null || selectedTab === "Artworks" || !enableCollectedArtists ? (
-        <MyCollectionArtworks
-          me={me}
-          relay={relay}
-          showSearchBar={showSearchBar}
-          setShowSearchBar={setShowSearchBar}
-        />
+        <MyCollectionArtworks me={me} relay={relay} />
       ) : null}
       {!!showDevAddButton && (
         <Button
@@ -227,7 +214,7 @@ const MyCollection: React.FC<{
           Add Random Work
         </Button>
       )}
-    </StickyTabPageScrollView>
+    </Tabs.ScrollView>
   )
 }
 
@@ -349,10 +336,7 @@ export const MyCollectionPlaceholder: React.FC = () => {
   const viewOption = GlobalStore.useAppState((state) => state.userPrefs.artworkViewOption)
 
   return (
-    <StickyTabPageScrollView
-      contentContainerStyle={{ justifyContent: "flex-start" }}
-      paddingHorizontal={0}
-    >
+    <Tabs.ScrollView contentContainerStyle={{ justifyContent: "flex-start", paddingHorizontal: 0 }}>
       {/* <Separator /> */}
       <Spacer y={1} />
       {/* Sort & Filter  */}
@@ -385,7 +369,7 @@ export const MyCollectionPlaceholder: React.FC = () => {
           ))}
         </Flex>
       )}
-    </StickyTabPageScrollView>
+    </Tabs.ScrollView>
   )
 }
 
diff --git a/src/app/Scenes/MyCollection/MyCollectionArtworks.tsx b/src/app/Scenes/MyCollection/MyCollectionArtworks.tsx
index ba41d5f159f..871418cbcdb 100644
--- a/src/app/Scenes/MyCollection/MyCollectionArtworks.tsx
+++ b/src/app/Scenes/MyCollection/MyCollectionArtworks.tsx
@@ -10,13 +10,7 @@ import { useScreenDimensions } from "app/utils/hooks"
 import { useDevToggle } from "app/utils/hooks/useDevToggle"
 import { refreshMyCollection } from "app/utils/refreshHelpers"
 import { useEffect, useState } from "react"
-import {
-  Alert,
-  InteractionManager,
-  LayoutAnimation,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-} from "react-native"
+import { Alert, InteractionManager } from "react-native"
 
 import { RelayPaginationProp, graphql } from "react-relay"
 import { MyCollectionArtworkList } from "./Components/MyCollectionArtworkList"
@@ -28,20 +22,12 @@ import { localSortAndFilterArtworks } from "./utils/localArtworkSortAndFilter"
 interface MyCollectionArtworksProps {
   me: MyCollection_me$data
   relay: RelayPaginationProp
-  showSearchBar: boolean
-  setShowSearchBar: (show: boolean) => void
 }
 
-export const MyCollectionArtworks: React.FC<MyCollectionArtworksProps> = ({
-  me,
-  relay,
-  showSearchBar,
-  setShowSearchBar,
-}) => {
+export const MyCollectionArtworks: React.FC<MyCollectionArtworksProps> = ({ me, relay }) => {
   const { height: screenHeight } = useScreenDimensions()
 
   const [minHeight, setMinHeight] = useState<number | undefined>(undefined)
-  const [initialScrollPosition, setInitialScrollPosition] = useState(-1)
 
   const [keywordFilter, setKeywordFilter] = useState("")
   const viewOption = GlobalStore.useAppState((state) => state.userPrefs.artworkViewOption)
@@ -64,31 +50,10 @@ export const MyCollectionArtworks: React.FC<MyCollectionArtworksProps> = ({
     cleanLocalImages()
   }, [])
 
-  // Make Search Bar visible when user scrolls to top
-  const handleScroll = ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (showSearchBar) {
-      return
-    }
-
-    if (initialScrollPosition === -1) {
-      setInitialScrollPosition(nativeEvent.contentOffset.y)
-      return
-    }
-
-    if (nativeEvent.contentOffset.y < initialScrollPosition) {
-      LayoutAnimation.configureNext({
-        ...LayoutAnimation.Presets.easeInEaseOut,
-        duration: 200,
-      })
-
-      setShowSearchBar(true)
-    }
-  }
-
   return (
     <Flex minHeight={minHeight} px={2}>
       <Flex mb={1}>
-        {!!showSearchBar && (
+        {artworks.length > 4 && (
           <MyCollectionSearchBar
             searchString={keywordFilter}
             onChangeText={setKeywordFilter}
@@ -155,8 +120,6 @@ export const MyCollectionArtworks: React.FC<MyCollectionArtworksProps> = ({
                 keywordFilter
               )
             }
-            scrollEventThrottle={100}
-            onScroll={handleScroll}
           />
         ) : (
           <MyCollectionArtworkList
@@ -172,8 +135,6 @@ export const MyCollectionArtworks: React.FC<MyCollectionArtworksProps> = ({
                 keywordFilter
               )
             }
-            scrollEventThrottle={100}
-            onScroll={handleScroll}
           />
         )
       ) : (
diff --git a/src/app/Scenes/MyCollection/Screens/ArtworkForm/MyCollectionArtworkUploadMessages.tsx b/src/app/Scenes/MyCollection/Screens/ArtworkForm/MyCollectionArtworkUploadMessages.tsx
index 870a25e251e..20e205ad40c 100644
--- a/src/app/Scenes/MyCollection/Screens/ArtworkForm/MyCollectionArtworkUploadMessages.tsx
+++ b/src/app/Scenes/MyCollection/Screens/ArtworkForm/MyCollectionArtworkUploadMessages.tsx
@@ -27,7 +27,7 @@ export const MyCollectionArtworkUploadMessages: React.FC<
   )
 
   return (
-    <Flex>
+    <Flex px={2}>
       {!!showAddedArtworkWithInsightsMessage && (
         <AddedArtworkWithInsightsMessage
           onClose={() => setVisualClueAsSeen(`AddedArtworkWithInsightsMessage_${tabPrefix}`)}
diff --git a/src/app/Scenes/MyCollection/Screens/Insights/AuctionResultsForArtistsYouCollectRail.tsx b/src/app/Scenes/MyCollection/Screens/Insights/AuctionResultsForArtistsYouCollectRail.tsx
index fde3fd7fcb8..0894dc3ec57 100644
--- a/src/app/Scenes/MyCollection/Screens/Insights/AuctionResultsForArtistsYouCollectRail.tsx
+++ b/src/app/Scenes/MyCollection/Screens/Insights/AuctionResultsForArtistsYouCollectRail.tsx
@@ -8,11 +8,11 @@ import {
 import { SectionTitle } from "app/Components/SectionTitle"
 import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
+import { useScreenDimensions } from "app/utils/hooks"
 import { Schema } from "app/utils/track"
 import { FlatList } from "react-native"
 import { graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
-import { useScreenDimensions } from "app/utils/hooks"
 
 interface AuctionResultsForArtistsYouCollectRailProps {
   me: AuctionResultsForArtistsYouCollectRail_me$key
@@ -45,6 +45,8 @@ export const AuctionResultsForArtistsYouCollectRail: React.FC<
       <FlatList
         data={auctionResultsData}
         listKey="artist-auction-results"
+        nestedScrollEnabled={false}
+        scrollEnabled={false}
         renderItem={({ item, index }) => (
           <AuctionResultListItemFragmentContainer
             auctionResult={item}
diff --git a/src/app/Scenes/MyCollection/Screens/Insights/MedianAuctionPriceRail.tsx b/src/app/Scenes/MyCollection/Screens/Insights/MedianAuctionPriceRail.tsx
index d2cee87fd34..e2549ac29d2 100644
--- a/src/app/Scenes/MyCollection/Screens/Insights/MedianAuctionPriceRail.tsx
+++ b/src/app/Scenes/MyCollection/Screens/Insights/MedianAuctionPriceRail.tsx
@@ -46,6 +46,8 @@ export const MedianAuctionPriceRail: React.FC<MedianAuctionPriceRailProps> = (pr
       <FlatList
         data={groupedArtworks}
         listKey="median-sale-prices"
+        scrollEnabled={false}
+        nestedScrollEnabled={false}
         ListHeaderComponent={() => (
           <Flex mx={2}>
             <SectionTitle
diff --git a/src/app/Scenes/MyCollection/Screens/Insights/MyCollectionInsights.tsx b/src/app/Scenes/MyCollection/Screens/Insights/MyCollectionInsights.tsx
index e747d81e0d5..181a07c9b85 100644
--- a/src/app/Scenes/MyCollection/Screens/Insights/MyCollectionInsights.tsx
+++ b/src/app/Scenes/MyCollection/Screens/Insights/MyCollectionInsights.tsx
@@ -1,8 +1,5 @@
+import { Flex, Spinner, Tabs } from "@artsy/palette-mobile"
 import { MyCollectionInsightsQuery } from "__generated__/MyCollectionInsightsQuery.graphql"
-import { StickTabPageRefreshControl } from "app/Components/StickyTabPage/StickTabPageRefreshControl"
-import { StickyTabPageFlatListContext } from "app/Components/StickyTabPage/StickyTabPageFlatList"
-import { StickyTabPagePlaceholder } from "app/Components/StickyTabPage/StickyTabPagePlaceholder"
-import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
 import { MyCollectionArtworkUploadMessages } from "app/Scenes/MyCollection/Screens/ArtworkForm/MyCollectionArtworkUploadMessages"
 import { Tab } from "app/Scenes/MyProfile/MyProfileHeaderMyCollectionAndSavedWorks"
 import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
@@ -13,7 +10,8 @@ import {
   MY_COLLECTION_REFRESH_KEY,
   RefreshEvents,
 } from "app/utils/refreshHelpers"
-import { Suspense, useContext, useEffect, useState } from "react"
+import { Suspense, useEffect, useState } from "react"
+import { RefreshControl } from "react-native"
 import { useLazyLoadQuery } from "react-relay"
 import { fetchQuery, graphql } from "relay-runtime"
 import { ActivateMoreMarketInsightsBanner } from "./ActivateMoreMarketInsightsBanner"
@@ -38,6 +36,9 @@ export const MyCollectionInsights: React.FC<{}> = ({}) => {
 
   const myCollectionArtworksCount = extractNodes(data.me?.myCollectionConnection).length
 
+  const showMyCollectionInsightsIncompleteMessage =
+    showVisualClue("MyCollectionInsightsIncompleteMessage") && areInsightsIncomplete
+
   const hasMarketSignals = !!data.me?.auctionResults?.totalCount
 
   useEffect(() => {
@@ -72,31 +73,6 @@ export const MyCollectionInsights: React.FC<{}> = ({}) => {
     })
   }
 
-  const setJSX = useContext(StickyTabPageFlatListContext).setJSX
-
-  const showMessages = async () => {
-    const showMyCollectionInsightsIncompleteMessage =
-      showVisualClue("MyCollectionInsightsIncompleteMessage") && areInsightsIncomplete
-
-    setJSX(
-      <>
-        {!!showMyCollectionInsightsIncompleteMessage && (
-          <MyCollectionInsightsIncompleteMessage
-            onClose={() => setVisualClueAsSeen("MyCollectionInsightsIncompleteMessage")}
-          />
-        )}
-        <MyCollectionArtworkUploadMessages
-          sourceTab={Tab.insights}
-          hasMarketSignals={hasMarketSignals}
-        />
-      </>
-    )
-  }
-
-  useEffect(() => {
-    showMessages()
-  }, [data.me?.myCollectionInfo?.artworksCount, areInsightsIncomplete])
-
   const renderContent = () => {
     return (
       <>
@@ -116,23 +92,40 @@ export const MyCollectionInsights: React.FC<{}> = ({}) => {
   }
 
   return (
-    <StickyTabPageScrollView
-      refreshControl={<StickTabPageRefreshControl onRefresh={refresh} refreshing={isRefreshing} />}
+    <Tabs.ScrollView
+      refreshControl={<RefreshControl onRefresh={refresh} refreshing={isRefreshing} />}
       contentContainerStyle={{
         // Extend the container flex when there are no artworks for accurate vertical centering
         flexGrow: myCollectionArtworksCount > 0 ? undefined : 1,
         justifyContent: myCollectionArtworksCount > 0 ? "flex-start" : "center",
         height: myCollectionArtworksCount > 0 ? "auto" : "100%",
+        paddingHorizontal: 0,
       }}
-      paddingHorizontal={0}
     >
+      <Tabs.SubTabBar>
+        {!!showMyCollectionInsightsIncompleteMessage && (
+          <MyCollectionInsightsIncompleteMessage
+            onClose={() => setVisualClueAsSeen("MyCollectionInsightsIncompleteMessage")}
+          />
+        )}
+        <MyCollectionArtworkUploadMessages
+          sourceTab={Tab.insights}
+          hasMarketSignals={hasMarketSignals}
+        />
+      </Tabs.SubTabBar>
       {myCollectionArtworksCount > 0 ? renderContent() : <MyCollectionInsightsEmptyState />}
-    </StickyTabPageScrollView>
+    </Tabs.ScrollView>
   )
 }
 
 export const MyCollectionInsightsQR: React.FC<{}> = () => (
-  <Suspense fallback={<StickyTabPagePlaceholder />}>
+  <Suspense
+    fallback={
+      <Flex flex={1} flexGrow={1} justifyContent="center" alignItems="center">
+        <Spinner />
+      </Flex>
+    }
+  >
     <MyCollectionInsights />
   </Suspense>
 )
diff --git a/src/app/Scenes/MyProfile/MyProfileHeaderMyCollectionAndSavedWorks.tsx b/src/app/Scenes/MyProfile/MyProfileHeaderMyCollectionAndSavedWorks.tsx
index e2f13912024..f13c0bdfeb4 100644
--- a/src/app/Scenes/MyProfile/MyProfileHeaderMyCollectionAndSavedWorks.tsx
+++ b/src/app/Scenes/MyProfile/MyProfileHeaderMyCollectionAndSavedWorks.tsx
@@ -1,7 +1,6 @@
 import { OwnerType } from "@artsy/cohesion"
-import { VisualClueDot, VisualClueText } from "@artsy/palette-mobile"
+import { Screen, Tabs, VisualClueDot } from "@artsy/palette-mobile"
 import { useCheckIfArtworkListsEnabled } from "app/Components/ArtworkLists/useCheckIfArtworkListsEnabled"
-import { StickyTabPage, TabProps } from "app/Components/StickyTabPage/StickyTabPage"
 import { ArtworkListsQR } from "app/Scenes/ArtworkLists/ArtworkLists"
 import { FavoriteArtworksQueryRenderer } from "app/Scenes/Favorites/FavoriteArtworks"
 import { MyCollectionBottomSheetModals } from "app/Scenes/MyCollection/Components/MyCollectionBottomSheetModals/MyCollectionBottomSheetModals"
@@ -11,13 +10,12 @@ import {
   MyCollectionTabsStore,
   MyCollectionTabsStoreProvider,
 } from "app/Scenes/MyCollection/State/MyCollectionTabsStore"
+import { MyProfileHeaderQueryRenderer } from "app/Scenes/MyProfile/MyProfileHeader"
 import { GlobalStore } from "app/store/GlobalStore"
+import { useVisualClue } from "app/utils/hooks/useVisualClue"
 import { ProvideScreenTrackingWithCohesionSchema } from "app/utils/track"
 import { screen } from "app/utils/track/helpers"
-import { compact } from "lodash"
 import { useMemo } from "react"
-import { SafeAreaView } from "react-native-safe-area-context"
-import { MyProfileHeaderQueryRenderer } from "./MyProfileHeader"
 
 export enum Tab {
   collection = "My Collection",
@@ -36,44 +34,46 @@ interface MyProfileTabProps {
 export const MyProfileHeaderMyCollectionAndSavedWorks: React.FC<Props> = ({ initialTab }) => {
   const isArtworkListsEnabled = useCheckIfArtworkListsEnabled()
   const viewKind = MyCollectionTabsStore.useStoreState((state) => state.viewKind)
-  const tabs: TabProps[] = compact([
-    {
-      title: Tab.collection,
-      content: <MyCollectionQueryRenderer />,
-    },
-    {
-      title: Tab.insights,
-      content: <MyCollectionInsightsQR />,
-      visualClues: [
-        {
-          jsx: <VisualClueDot style={{ marginLeft: 5, alignSelf: "flex-start", marginTop: 1 }} />,
-          visualClueName: "AddedArtworkWithInsightsVisualClueDot",
-        },
-        {
-          jsx: <VisualClueText />,
-          visualClueName: "MyCollectionInsights",
-        },
-      ],
-    },
-    {
-      title: Tab.savedWorks,
-      content: isArtworkListsEnabled ? <ArtworkListsQR /> : <FavoriteArtworksQueryRenderer />,
-    },
-  ])
+  const { showVisualClue } = useVisualClue()
 
-  tabs.forEach((tab) => {
-    tab.initial = tab.title === initialTab
-  })
+  // Check if there's new content
+  const indicators = []
+  if (showVisualClue("AddedArtworkWithInsightsVisualClueDot")) {
+    indicators.push({
+      tabName: Tab.insights,
+      Component: () => {
+        return <VisualClueDot style={{ left: -29, alignSelf: "flex-end", marginTop: 15 }} />
+      },
+    })
+  }
 
   return (
     <>
-      <SafeAreaView edges={["top"]} style={{ flex: 1 }}>
-        <StickyTabPage
-          disableBackButtonUpdate
-          tabs={tabs}
-          staticHeaderContent={<MyProfileHeaderQueryRenderer />}
-        />
-      </SafeAreaView>
+      <Screen>
+        <Screen.Body fullwidth>
+          <Tabs
+            initialTabName={initialTab}
+            renderHeader={() => <MyProfileHeaderQueryRenderer />}
+            indicators={indicators}
+          >
+            <Tabs.Tab name={Tab.collection} label={Tab.collection}>
+              <Tabs.Lazy>
+                <MyCollectionQueryRenderer />
+              </Tabs.Lazy>
+            </Tabs.Tab>
+            <Tabs.Tab name={Tab.insights} label={Tab.insights}>
+              <Tabs.Lazy>
+                <MyCollectionInsightsQR />
+              </Tabs.Lazy>
+            </Tabs.Tab>
+            <Tabs.Tab name={Tab.savedWorks} label={Tab.savedWorks}>
+              <Tabs.Lazy>
+                {isArtworkListsEnabled ? <ArtworkListsQR /> : <FavoriteArtworksQueryRenderer />}
+              </Tabs.Lazy>
+            </Tabs.Tab>
+          </Tabs>
+        </Screen.Body>
+      </Screen>
       {viewKind !== null && <MyCollectionBottomSheetModals />}
     </>
   )