[C-4017] Small fixes for ssr profile page rendering (#7937)

AudiusProject · Mar 26, 2024 · b8f638f · b8f638f
1 parent 1598562
commit b8f638f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git 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
@@ -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
@@ -709,7 +709,7 @@ const ProfilePage = g(
             areArtistRecommendationsVisible={areArtistRecommendationsVisible}
             onCloseArtistRecommendations={onCloseArtistRecommendations}
           />
-          {content}
+          <ClientOnly>{content}</ClientOnly>
         </MobilePageContainer>
         <ClientOnly>
           <TierExplainerDrawer />