From e7ad3583cd2ff42e45be1b17796ebc3d3d687e75 Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Thu, 31 Oct 2024 12:21:58 -0400
Subject: [PATCH 1/2] Add reply comment animation to web

---
 .../src/components/comments/CommentThread.tsx | 69 ++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/packages/web/src/components/comments/CommentThread.tsx b/packages/web/src/components/comments/CommentThread.tsx
index 6b9223e70d8..335af86d0b8 100644
--- a/packages/web/src/components/comments/CommentThread.tsx
+++ b/packages/web/src/components/comments/CommentThread.tsx
@@ -12,7 +12,6 @@ import {
   LoadingSpinner,
   PlainButton
 } from '@audius/harmony'
-
 import { track, make } from 'services/analytics'
 
 import { CommentBlock } from './CommentBlock'
@@ -97,37 +96,45 @@ export const CommentThread = ({ commentId }: { commentId: ID }) => {
                 : messages.hideReplies}
             </PlainButton>
           </Box>
-          {hiddenReplies[rootComment.id] ? null : (
-            <Flex
-              direction='column'
-              gap='l'
-              as='ul'
-              aria-label={messages.replies}
-            >
-              {replies.map((reply: ReplyComment) => (
-                <Flex w='100%' key={reply.id} as='li'>
-                  <CommentBlock
-                    commentId={reply.id}
-                    parentCommentId={rootComment.id}
-                  />
-                </Flex>
-              ))}
-            </Flex>
-          )}
-
-          {hasMoreReplies && !hiddenReplies[rootComment.id] ? (
-            <PlainButton
-              onClick={handleLoadMoreReplies}
-              variant='subdued'
-              css={{ width: 'max-content' }}
-              disabled={isFetchingReplies}
-            >
-              {messages.showMoreReplies}
-              {isFetchingReplies ? (
-                <LoadingSpinner css={{ width: 20, height: 20 }} />
+          <Box
+            css={{
+              display: 'grid',
+              gridTemplateRows: hiddenReplies[rootComment.id] ? '0fr' : '1fr',
+              transition: 'grid-template-rows 0.25s ease-out'
+            }}
+          >
+            <Flex direction='column' gap='l' css={{ overflow: 'hidden' }}>
+              <Flex
+                direction='column'
+                gap='l'
+                as='ul'
+                aria-label={messages.replies}
+              >
+                {replies.map((reply: ReplyComment) => (
+                  <Flex w='100%' key={reply.id} as='li'>
+                    <CommentBlock
+                      commentId={reply.id}
+                      parentCommentId={rootComment.id}
+                    />
+                  </Flex>
+                ))}
+              </Flex>
+
+              {hasMoreReplies ? (
+                <PlainButton
+                  onClick={handleLoadMoreReplies}
+                  variant='subdued'
+                  css={{ width: 'max-content' }}
+                  disabled={isFetchingReplies}
+                >
+                  {messages.showMoreReplies}
+                  {isFetchingReplies ? (
+                    <LoadingSpinner css={{ width: 20, height: 20 }} />
+                  ) : null}
+                </PlainButton>
               ) : null}
-            </PlainButton>
-          ) : null}
+            </Flex>
+          </Box>
         </Flex>
       ) : null}
     </Flex>

From 1638416b379891f34f0f7a293d4741bc531c7c87 Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Thu, 31 Oct 2024 13:11:04 -0400
Subject: [PATCH 2/2] fix lint

---
 packages/web/src/components/comments/CommentThread.tsx |  1 +
 .../src/components/composer-input/ComposerInput.tsx    | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/comments/CommentThread.tsx b/packages/web/src/components/comments/CommentThread.tsx
index 335af86d0b8..aa39820a511 100644
--- a/packages/web/src/components/comments/CommentThread.tsx
+++ b/packages/web/src/components/comments/CommentThread.tsx
@@ -12,6 +12,7 @@ import {
   LoadingSpinner,
   PlainButton
 } from '@audius/harmony'
+
 import { track, make } from 'services/analytics'
 
 import { CommentBlock } from './CommentBlock'
diff --git a/packages/web/src/components/composer-input/ComposerInput.tsx b/packages/web/src/components/composer-input/ComposerInput.tsx
index 7498e1dee3c..cf7c20a326e 100644
--- a/packages/web/src/components/composer-input/ComposerInput.tsx
+++ b/packages/web/src/components/composer-input/ComposerInput.tsx
@@ -285,7 +285,15 @@ export const ComposerInput = (props: ComposerInputProps) => {
     submittedRef.current = false
     setUserMentions([])
     setUserIdMap({})
-  }, [getUserMentions, linkEntities, onSubmit, restoreLinks, userIdMap, value])
+  }, [
+    blurOnSubmit,
+    getUserMentions,
+    linkEntities,
+    onSubmit,
+    restoreLinks,
+    userIdMap,
+    value
+  ])
 
   // Submit when pressing enter while not holding shift
   const handleKeyDown = useCallback(