From 3c5f69e45fcbc46b4235a743f8deb4e332331197 Mon Sep 17 00:00:00 2001
From: JD Francis <jd@audius.co>
Date: Thu, 17 Oct 2024 13:10:57 -0500
Subject: [PATCH] Fix mobile web skeletons

---
 .../comments/CommentSectionMobile.tsx         |  2 +-
 .../components/comments/CommentSkeletons.tsx  | 41 ++++++++-----------
 .../pages/track-page/TrackCommentsPage.tsx    |  5 ++-
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/packages/web/src/components/comments/CommentSectionMobile.tsx b/packages/web/src/components/comments/CommentSectionMobile.tsx
index cd5ef844845..486fd53d687 100644
--- a/packages/web/src/components/comments/CommentSectionMobile.tsx
+++ b/packages/web/src/components/comments/CommentSectionMobile.tsx
@@ -66,7 +66,7 @@ const CommentSectionContent = () => {
     return (
       <Flex direction='row' gap='s' alignItems='center'>
         <Skeleton w={40} h={40} css={{ borderRadius: 100 }} />
-        <Flex gap='s'>
+        <Flex gap='s' direction='column'>
           <Skeleton h={20} w={240} />
           <Skeleton h={20} w={160} />
         </Flex>
diff --git a/packages/web/src/components/comments/CommentSkeletons.tsx b/packages/web/src/components/comments/CommentSkeletons.tsx
index 1acec0e5cf3..b1dec03f12e 100644
--- a/packages/web/src/components/comments/CommentSkeletons.tsx
+++ b/packages/web/src/components/comments/CommentSkeletons.tsx
@@ -1,34 +1,29 @@
-import { Divider, Flex, Paper, Skeleton } from '@audius/harmony'
-
-import { CommentHeader } from './CommentHeader'
+import { Flex, Skeleton } from '@audius/harmony'
 
 const CommentBlockSkeleton = () => (
   <Flex direction='row' gap='s' alignItems='center' p='l'>
-    <Skeleton w={40} h={40} css={{ borderRadius: 100 }} />
-    <Flex gap='s'>
-      <Skeleton w={20} h={240} />
-      <Skeleton w={20} h={160} />
+    <Skeleton w={40} h={40} css={{ borderRadius: 100, flexShrink: 0 }} />
+    <Flex gap='s' direction='column'>
+      <Skeleton h={20} w={240} />
+      <Skeleton h={20} w={160} />
     </Flex>
   </Flex>
 )
 
 // TODO: mobile can also go in here
 export const CommentSkeletons = () => (
-  <Flex gap='l' direction='column' w='100%' alignItems='flex-start'>
-    <CommentHeader isLoading />
-    <Paper p='xl' w='100%' direction='column' gap='xl'>
-      <Flex
-        gap='s'
-        w='100%'
-        h='60px'
-        alignItems='center'
-        justifyContent='center'
-      >
-        <Skeleton w='40px' h='40px' css={{ borderRadius: '100%' }} />
-        <Skeleton w='100%' h='60px' />
-      </Flex>
-      <Divider color='default' orientation='horizontal' />
-      <CommentBlockSkeleton />
-    </Paper>
+  <Flex
+    gap='s'
+    direction='column'
+    w='100%'
+    h='100%'
+    alignItems='flex-start'
+    mt='s'
+  >
+    <CommentBlockSkeleton />
+    <CommentBlockSkeleton />
+    <CommentBlockSkeleton />
+    <CommentBlockSkeleton />
+    <CommentBlockSkeleton />
   </Flex>
 )
diff --git a/packages/web/src/pages/track-page/TrackCommentsPage.tsx b/packages/web/src/pages/track-page/TrackCommentsPage.tsx
index d77fecec3d9..2e3eb5057a5 100644
--- a/packages/web/src/pages/track-page/TrackCommentsPage.tsx
+++ b/packages/web/src/pages/track-page/TrackCommentsPage.tsx
@@ -37,7 +37,10 @@ export const TrackCommentsPage = () => {
   return (
     <MobilePageContainer
       title={messages.title}
-      css={(theme) => ({ backgroundColor: theme.color.background.white })}
+      css={(theme) => ({
+        backgroundColor: theme.color.background.white,
+        height: '100%'
+      })}
     >
       {comments_disabled ? (
         <Flex p='2xl' justifyContent='center'>