New comment transition tryout

ikprk · Jun 4, 2024 · 8bc7854 · 8bc7854
1 parent 9174a8c
commit 8bc7854
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx b/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx
@@ -1,6 +1,7 @@
 import { NetworkStatus } from '@apollo/client'
 import { FC, ReactElement, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
 
 import { useComment, useUserCommentsReactions } from '@/api/hooks/comments'
 import { useCommentSectionComments } from '@/api/hooks/useCommentSectionComments'
@@ -211,7 +212,7 @@ export const CommentsSection: FC<CommentsSectionProps> = ({ disabled, video, vid
               },
             },
             children: (
-              <>
+              <TransitionGroup className="comments-list">
                 {displayedCommentFromUrl && (
                   <CommentThread
                     commentId={displayedCommentFromUrl.id}
@@ -228,19 +229,20 @@ export const CommentsSection: FC<CommentsSectionProps> = ({ disabled, video, vid
                   ? mappedPlaceholders
                   : filteredComments
                       ?.map((comment) => (
-                        <CommentThread
-                          key={comment.id}
-                          commentId={comment.id}
-                          video={video}
-                          hasAnyReplies={comment.repliesCount > 0}
-                          repliesCount={comment.repliesCount}
-                          userReactionsLookup={userReactions}
-                          highlightedCommentId={highlightedCommentId}
-                          setHighlightedCommentId={setHighlightedCommentId}
-                        />
+                        <CSSTransition key={comment.id} timeout={500} classNames="comment">
+                          <CommentThread
+                            commentId={comment.id}
+                            video={video}
+                            hasAnyReplies={comment.repliesCount > 0}
+                            repliesCount={comment.repliesCount}
+                            userReactionsLookup={userReactions}
+                            highlightedCommentId={highlightedCommentId}
+                            setHighlightedCommentId={setHighlightedCommentId}
+                          />
+                        </CSSTransition>
                       ))
                       .concat(isFetchingMore && commentsLoading ? mappedPlaceholders : [])}
-              </>
+              </TransitionGroup>
             ) as unknown as ReactElement[],
           }}
           footerProps={

diff --git a/packages/atlas/src/views/viewer/VideoView/VideoView.styles.ts b/packages/atlas/src/views/viewer/VideoView/VideoView.styles.ts
@@ -218,6 +218,34 @@ export const CommentsStyledSection = styled(Section)`
   ${media.md} {
     margin-bottom: 0;
   }
+
+  .comments-list {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .comment-enter {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  .comment-enter-active {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 500ms, transform 500ms;
+  }
+
+  .comment-exit {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .comment-exit-active {
+    opacity: 0;
+    transform: translateX(-20px);
+    transition: opacity 500ms, transform 500ms;
+  }
 `
 
 export const LoadMoreCommentsWrapper = styled.div`