From 331fdc6345bf71edffa2f30bc704536ca60a8f7c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 7 Apr 2026 22:59:20 +0000
Subject: [PATCH] Show explore content sections only on sub-tabs, not on
 default All tab

Explore sections (recommended tracks, featured playlists, artist spotlight,
etc.) were loading too slowly on the default Explore page. This moves them
to only appear on their specific sub-tabs (Tracks, Playlists, Albums, Profiles)
while keeping the default All tab clean. FanClubsExploreSection moves from
All to Profiles tab, and RecentSearches only shows on sub-tabs.

Changes apply to web desktop, web mobile, and React Native mobile.

https://claude.ai/code/session_018udUfkNDSuFVnRhLkVTgYk
---
 .../components/ExploreContent.tsx              |  9 +++++----
 .../components/desktop/SearchExplorePage.tsx   | 18 ++++++++----------
 .../components/mobile/SearchExplorePage.tsx    | 16 ++++++++--------
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx b/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx
index 516fb1942d7..0c3111b4f42 100644
--- a/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx
+++ b/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx
@@ -21,9 +21,10 @@ export const ExploreContent = () => {
     useCurrentUserId()
 
   const showUserContextualContent = isCurrentUserIdLoading || !!currentUserId
-  const showTrackContent = category === 'tracks' || category === 'all'
-  const showPlaylistContent = category === 'playlists' || category === 'all'
-  const showUserContent = category === 'users' || category === 'all'
+  const isAllTab = category === 'all'
+  const showTrackContent = category === 'tracks'
+  const showPlaylistContent = category === 'playlists'
+  const showUserContent = category === 'users'
 
   return (
     <Flex gap='2xl' pt='s' pb={150} ph='l'>
@@ -37,7 +38,7 @@ export const ExploreContent = () => {
       {showUserContent && <ArtistSpotlight />}
       {showUserContent && <LabelSpotlight />}
       {showTrackContent && showUserContextualContent && <FeelingLucky />}
-      {showUserContextualContent && <RecentSearches />}
+      {!isAllTab && showUserContextualContent && <RecentSearches />}
     </Flex>
   )
 }
diff --git a/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx b/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx
index ced12b14709..9ae0fd4c56c 100644
--- a/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx
+++ b/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx
@@ -195,12 +195,10 @@ const SearchExplorePage = ({
   }, [])
 
   const showUserContextualContent = isCurrentUserIdLoading || !!currentUserId
-  const showTrackContent =
-    categoryKey === CategoryView.TRACKS || categoryKey === CategoryView.ALL
-  const showPlaylistContent =
-    categoryKey === CategoryView.PLAYLISTS || categoryKey === CategoryView.ALL
-  const showUserContent =
-    categoryKey === CategoryView.PROFILES || categoryKey === CategoryView.ALL
+  const isAllTab = categoryKey === CategoryView.ALL
+  const showTrackContent = categoryKey === CategoryView.TRACKS
+  const showPlaylistContent = categoryKey === CategoryView.PLAYLISTS
+  const showUserContent = categoryKey === CategoryView.PROFILES
   const isTracksTab = categoryKey === CategoryView.TRACKS
   const isPlaylistsTab = categoryKey === CategoryView.PLAYLISTS
   const isAlbumsTab = categoryKey === CategoryView.ALBUMS
@@ -328,9 +326,7 @@ const SearchExplorePage = ({
               <RecentlyPlayedSection />
             ) : null}
             {showPlaylistContent ? <FeaturedPlaylistsSection /> : null}
-            {categoryKey === CategoryView.ALL ? (
-              <FanClubsExploreSection />
-            ) : null}
+            {showUserContent ? <FanClubsExploreSection /> : null}
             {showTrackContent ? <FeaturedRemixContestsSection /> : null}
             {isTracksTab ? <UndergroundTrendingTracksSection /> : null}
             {showUserContent ? <ArtistSpotlightSection /> : null}
@@ -339,7 +335,9 @@ const SearchExplorePage = ({
             {showTrackContent && showUserContextualContent ? (
               <FeelingLuckySection />
             ) : null}
-            {showUserContextualContent ? <RecentSearchesSection /> : null}
+            {!isAllTab && showUserContextualContent ? (
+              <RecentSearchesSection />
+            ) : null}
           </Flex>
         </Flex>
       </Flex>
diff --git a/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx b/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx
index 7c9c4410488..925688c4a80 100644
--- a/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx
+++ b/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx
@@ -173,12 +173,10 @@ const SearchExplorePage = ({
   }, [setCenter, setRight])
 
   const showUserContextualContent = isCurrentUserIdLoading || !!currentUserId
-  const showTrackContent =
-    categoryKey === CategoryView.TRACKS || categoryKey === CategoryView.ALL
-  const showPlaylistContent =
-    categoryKey === CategoryView.PLAYLISTS || categoryKey === CategoryView.ALL
-  const showUserContent =
-    categoryKey === CategoryView.PROFILES || categoryKey === CategoryView.ALL
+  const isAllTab = categoryKey === CategoryView.ALL
+  const showTrackContent = categoryKey === CategoryView.TRACKS
+  const showPlaylistContent = categoryKey === CategoryView.PLAYLISTS
+  const showUserContent = categoryKey === CategoryView.PROFILES
   const isTracksTab = categoryKey === CategoryView.TRACKS
   const isPlaylistsTab = categoryKey === CategoryView.PLAYLISTS
   const isAlbumsTab = categoryKey === CategoryView.ALBUMS
@@ -254,7 +252,7 @@ const SearchExplorePage = ({
             <RecentlyPlayedSection />
           ) : null}
           {showPlaylistContent ? <FeaturedPlaylistsSection /> : null}
-          {categoryKey === CategoryView.ALL ? <FanClubsExploreSection /> : null}
+          {showUserContent ? <FanClubsExploreSection /> : null}
           {showTrackContent ? <FeaturedRemixContestsSection /> : null}
           {isTracksTab ? <UndergroundTrendingTracksSection /> : null}
           {showUserContent ? <ArtistSpotlightSection /> : null}
@@ -263,7 +261,9 @@ const SearchExplorePage = ({
           {showTrackContent && showUserContextualContent ? (
             <FeelingLuckySection />
           ) : null}
-          {showUserContextualContent ? <RecentSearchesSection /> : null}
+          {!isAllTab && showUserContextualContent ? (
+            <RecentSearchesSection />
+          ) : null}
         </Flex>
       </Flex>
     </MobilePageContainer>