From b8f638f15c658c7c45981a6ed577edc350dffdee Mon Sep 17 00:00:00 2001
From: Kyle Shanks <kyle.j.shanks@gmail.com>
Date: Mon, 25 Mar 2024 21:50:47 -0400
Subject: [PATCH] [C-4017] Small fixes for ssr profile page rendering (#7937)

---
 packages/web/src/hooks/useTabs/useTabs.tsx    | 30 ++++++++++---------
 .../components/mobile/ProfileHeader.tsx       | 18 ++++++-----
 .../components/mobile/ProfilePage.tsx         |  2 +-
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/web/src/hooks/useTabs/useTabs.tsx b/packages/web/src/hooks/useTabs/useTabs.tsx
index aaf2dfc0957..bb35a74234b 100644
--- a/packages/web/src/hooks/useTabs/useTabs.tsx
+++ b/packages/web/src/hooks/useTabs/useTabs.tsx
@@ -21,6 +21,7 @@ import { throttle } from 'lodash'
 import { animated, useTransition, useSpring } from 'react-spring'
 import { useDrag } from 'react-use-gesture'
 
+import { ClientOnly } from 'components/client-only/ClientOnly'
 import { SeoLink } from 'components/link'
 import Tooltip from 'components/tooltip/Tooltip'
 
@@ -268,20 +269,21 @@ const TabBar = memo(
           }
 
           return (
-            <Tooltip
-              text={tab.disabledTooltipText || disabledTabTooltipText}
-              placement='bottom'
-              disabled={!tooltipActive}
-              key={i}
-            >
-              {to && pathname ? (
-                <SeoLink {...rootProps} to={`${pathname}/${to}`}>
-                  {tabElement}
-                </SeoLink>
-              ) : (
-                <div {...rootProps}>{tabElement}</div>
-              )}
-            </Tooltip>
+            <ClientOnly key={i}>
+              <Tooltip
+                text={tab.disabledTooltipText || disabledTabTooltipText}
+                placement='bottom'
+                disabled={!tooltipActive}
+              >
+                {to && pathname ? (
+                  <SeoLink {...rootProps} to={`${pathname}/${to}`}>
+                    {tabElement}
+                  </SeoLink>
+                ) : (
+                  <div {...rootProps}>{tabElement}</div>
+                )}
+              </Tooltip>
+            </ClientOnly>
           )
         })}
       </div>
diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
index 14062c05107..4b3f0996f1b 100644
--- a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
+++ b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
@@ -495,14 +495,16 @@ const ProfileHeader = ({
               {isDescriptionMinimized ? messages.showMore : messages.showLess}
             </div>
           ) : null}
-          <ArtistRecommendationsDropdown
-            isVisible={areArtistRecommendationsVisible}
-            renderHeader={() => (
-              <p>Here are some accounts that vibe well with {name}</p>
-            )}
-            artistId={userId}
-            onClose={onCloseArtistRecommendations}
-          />
+          <ClientOnly>
+            <ArtistRecommendationsDropdown
+              isVisible={areArtistRecommendationsVisible}
+              renderHeader={() => (
+                <p>Here are some accounts that vibe well with {name}</p>
+              )}
+              artistId={userId}
+              onClose={onCloseArtistRecommendations}
+            />
+          </ClientOnly>
         </div>
       )}
       {mode === 'owner' && !isEditing && <UploadButton />}
diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
index a9e14adaf41..c06f5937cc5 100644
--- a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
+++ b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
@@ -709,7 +709,7 @@ const ProfilePage = g(
             areArtistRecommendationsVisible={areArtistRecommendationsVisible}
             onCloseArtistRecommendations={onCloseArtistRecommendations}
           />
-          {content}
+          <ClientOnly>{content}</ClientOnly>
         </MobilePageContainer>
         <ClientOnly>
           <TierExplainerDrawer />