From 2521653ba27187c2b7b11046c4a402f2e91c2d02 Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Fri, 6 Dec 2024 17:48:02 +0800
Subject: [PATCH 1/6] feat(ArticleCommentForm): add slide down fade animation

---
 src/components/Comment/FooterActions/index.tsx  |  1 +
 .../Forms/ArticleCommentForm/index.tsx          | 10 +++++++++-
 .../Forms/ArticleCommentForm/styles.module.css  | 17 +++++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/Comment/FooterActions/index.tsx b/src/components/Comment/FooterActions/index.tsx
index 290d4cb443..be629286da 100644
--- a/src/components/Comment/FooterActions/index.tsx
+++ b/src/components/Comment/FooterActions/index.tsx
@@ -283,6 +283,7 @@ const BaseFooterActions = ({
               }}
               isInCommentDetail={isInCommentDetail}
               defaultContent={defaultContent}
+              playAnimation
             />
           </>
         )}
diff --git a/src/components/Forms/ArticleCommentForm/index.tsx b/src/components/Forms/ArticleCommentForm/index.tsx
index 7fbf4c381b..18cf2e8c5e 100644
--- a/src/components/Forms/ArticleCommentForm/index.tsx
+++ b/src/components/Forms/ArticleCommentForm/index.tsx
@@ -1,4 +1,5 @@
 import { Editor } from '@matters/matters-editor'
+import classNames from 'classnames'
 import { useContext, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
@@ -38,6 +39,7 @@ export interface ArticleCommentFormProps {
   showClear?: boolean
   placeholder?: string
 
+  playAnimation?: boolean
   isFallbackEditor?: boolean
   setEditor?: (editor: Editor | null) => void
 }
@@ -54,6 +56,7 @@ export const ArticleCommentForm: React.FC<ArticleCommentFormProps> = ({
   showClear,
   placeholder,
   isFallbackEditor,
+  playAnimation,
   setEditor: propsSetEditor,
 }) => {
   const intl = useIntl()
@@ -178,9 +181,14 @@ export const ArticleCommentForm: React.FC<ArticleCommentFormProps> = ({
     handleSubmit()
   })
 
+  const formClasses = classNames({
+    [styles.form]: true,
+    [styles.playAnimation]: playAnimation,
+  })
+
   return (
     <form
-      className={styles.form}
+      className={formClasses}
       id={formStorageKey}
       onSubmit={handleSubmit}
       aria-label={intl.formatMessage({
diff --git a/src/components/Forms/ArticleCommentForm/styles.module.css b/src/components/Forms/ArticleCommentForm/styles.module.css
index 0bbc531f4e..d7c9e97aa7 100644
--- a/src/components/Forms/ArticleCommentForm/styles.module.css
+++ b/src/components/Forms/ArticleCommentForm/styles.module.css
@@ -6,6 +6,11 @@
   border-radius: var(--sp8);
 }
 
+.playAnimation {
+  overflow: hidden;
+  animation: slide-down-fade 1s;
+}
+
 .content {
   padding: var(--sp4) var(--sp12);
   margin-bottom: var(--sp8);
@@ -24,3 +29,15 @@
     color: var(--color-negative-red);
   }
 }
+
+@keyframes slide-down-fade {
+  0% {
+    max-height: 0;
+    opacity: 0;
+  }
+
+  100% {
+    max-height: 500px;
+    opacity: 1;
+  }
+}

From 0a6b1ae64659e8895b4aaf1cd5c68f1792d720de Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Fri, 6 Dec 2024 18:31:57 +0800
Subject: [PATCH 2/6] feat(ArticleCommentForm): add smooth hide animation for
 comment forms

---
 .../Comment/FooterActions/index.tsx           | 41 +++++++++++++------
 .../Forms/ArticleCommentForm/index.tsx        | 12 +++++-
 .../ArticleCommentForm/styles.module.css      | 23 +++++++++--
 3 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/src/components/Comment/FooterActions/index.tsx b/src/components/Comment/FooterActions/index.tsx
index be629286da..f9e0984f91 100644
--- a/src/components/Comment/FooterActions/index.tsx
+++ b/src/components/Comment/FooterActions/index.tsx
@@ -189,6 +189,31 @@ const BaseFooterActions = ({
       )} `
     : ''
 
+  const [isHiding, setIsHiding] = useState(false)
+
+  const handleHideForm = () => {
+    // Start hide animation
+    setIsHiding(true)
+  }
+
+  const handleHideComplete = () => {
+    // End hide animation
+    setIsHiding(false)
+
+    if (editor === activeEditor) {
+      setActiveEditor(null)
+    }
+    setShowForm(false)
+  }
+
+  const handleReplyButtonClick = () => {
+    if (showForm) {
+      handleHideForm()
+    } else {
+      toggleShowForm()
+    }
+  }
+
   return (
     <>
       <footer
@@ -232,12 +257,7 @@ const BaseFooterActions = ({
                       {...buttonProps}
                       {...replyButtonProps}
                       {...replyCustomButtonProps}
-                      onClick={() => {
-                        if (editor === activeEditor) {
-                          setActiveEditor(null)
-                        }
-                        toggleShowForm()
-                      }}
+                      onClick={handleReplyButtonClick}
                     />
                   </Media>
                 </>
@@ -275,15 +295,12 @@ const BaseFooterActions = ({
               replyToId={comment.id}
               parentId={comment.parentComment?.id || comment.id}
               submitCallback={submitCallback}
-              closeCallback={() => {
-                if (editor === activeEditor) {
-                  setActiveEditor(null)
-                }
-                setShowForm(false)
-              }}
+              closeCallback={handleHideForm}
               isInCommentDetail={isInCommentDetail}
               defaultContent={defaultContent}
               playAnimation
+              isHiding={isHiding}
+              onHideComplete={handleHideComplete}
             />
           </>
         )}
diff --git a/src/components/Forms/ArticleCommentForm/index.tsx b/src/components/Forms/ArticleCommentForm/index.tsx
index 18cf2e8c5e..b1c61174e2 100644
--- a/src/components/Forms/ArticleCommentForm/index.tsx
+++ b/src/components/Forms/ArticleCommentForm/index.tsx
@@ -42,6 +42,8 @@ export interface ArticleCommentFormProps {
   playAnimation?: boolean
   isFallbackEditor?: boolean
   setEditor?: (editor: Editor | null) => void
+  onHideComplete?: () => void
+  isHiding?: boolean
 }
 
 export const ArticleCommentForm: React.FC<ArticleCommentFormProps> = ({
@@ -57,6 +59,8 @@ export const ArticleCommentForm: React.FC<ArticleCommentFormProps> = ({
   placeholder,
   isFallbackEditor,
   playAnimation,
+  onHideComplete,
+  isHiding,
   setEditor: propsSetEditor,
 }) => {
   const intl = useIntl()
@@ -183,7 +187,8 @@ export const ArticleCommentForm: React.FC<ArticleCommentFormProps> = ({
 
   const formClasses = classNames({
     [styles.form]: true,
-    [styles.playAnimation]: playAnimation,
+    [styles.playAnimation]: playAnimation && !isHiding,
+    [styles.hideAnimation]: isHiding,
   })
 
   return (
@@ -207,6 +212,11 @@ export const ArticleCommentForm: React.FC<ArticleCommentFormProps> = ({
           return
         }
       }}
+      onAnimationEnd={() => {
+        if (isHiding && onHideComplete) {
+          onHideComplete()
+        }
+      }}
     >
       <section className={styles.content}>
         <CommentEditor
diff --git a/src/components/Forms/ArticleCommentForm/styles.module.css b/src/components/Forms/ArticleCommentForm/styles.module.css
index d7c9e97aa7..6dd923087a 100644
--- a/src/components/Forms/ArticleCommentForm/styles.module.css
+++ b/src/components/Forms/ArticleCommentForm/styles.module.css
@@ -8,7 +8,12 @@
 
 .playAnimation {
   overflow: hidden;
-  animation: slide-down-fade 1s;
+  animation: slide-down-fade 0.3s ease-out;
+}
+
+.hideAnimation {
+  overflow: hidden;
+  animation: slide-up-fade 0.3s ease-out forwards;
 }
 
 .content {
@@ -31,13 +36,25 @@
 }
 
 @keyframes slide-down-fade {
-  0% {
+  from {
     max-height: 0;
     opacity: 0;
   }
 
-  100% {
+  to {
+    max-height: 500px;
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up-fade {
+  from {
     max-height: 500px;
     opacity: 1;
   }
+
+  to {
+    max-height: 0;
+    opacity: 0;
+  }
 }

From 51915eceaf3da2f9d1471a836a3fa816bd7fb029 Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Fri, 6 Dec 2024 20:54:16 +0800
Subject: [PATCH 3/6] feat(Comment): add slide-down animation for new comments

---
 src/common/enums/storage.ts                   |  3 ++
 src/components/Comment/Feed/index.tsx         | 26 ++++++++++--
 src/components/Comment/Feed/styles.module.css | 40 +++++++++++++++++++
 .../CommentForm/index.tsx                     | 27 ++++++++++---
 .../Forms/ArticleCommentForm/index.tsx        | 13 +++++-
 .../Forms/MomentCommentForm/index.tsx         | 10 ++++-
 6 files changed, 109 insertions(+), 10 deletions(-)

diff --git a/src/common/enums/storage.ts b/src/common/enums/storage.ts
index 2d9f15b780..1afe221ac2 100644
--- a/src/common/enums/storage.ts
+++ b/src/common/enums/storage.ts
@@ -12,3 +12,6 @@ export const REFERRAL_QUERY_REFERRAL_KEY = 'referral'
 export const REFERRAL_STORAGE_REFERRAL_CODE = '__REFERRAL_CODE'
 
 export const HAS_SHOW_MOMENT_BANNER = '__HAS_SHOW_MOMENT_BANNER'
+
+export const NEW_POST_COMMENT_MUTATION_RESULT =
+  '__NEW_POST_COMMENT_MUTATION_RESULT'
diff --git a/src/components/Comment/Feed/index.tsx b/src/components/Comment/Feed/index.tsx
index d70d96e06d..6f26c20b34 100644
--- a/src/components/Comment/Feed/index.tsx
+++ b/src/components/Comment/Feed/index.tsx
@@ -1,8 +1,12 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import { COMMENT_FEED_ID_PREFIX, TEST_ID } from '~/common/enums'
-import { toPath } from '~/common/utils'
+import {
+  COMMENT_FEED_ID_PREFIX,
+  NEW_POST_COMMENT_MUTATION_RESULT,
+  TEST_ID,
+} from '~/common/enums'
+import { sessionStorage, toPath } from '~/common/utils'
 import {
   Avatar,
   AvatarSize,
@@ -80,11 +84,27 @@ const BaseCommentFeed = ({
     moment: node,
   })
 
+  const newPostCommentMutationResult = sessionStorage.get(
+    NEW_POST_COMMENT_MUTATION_RESULT
+  )
+
+  const isNewPostComment = newPostCommentMutationResult === id
+
+  const commentClasses = classNames({
+    [styles.comment]: true,
+    [styles.playSlideDownFade]: isNewPostComment,
+  })
+
   return (
     <article
-      className={styles.comment}
+      className={commentClasses}
       id={`${COMMENT_FEED_ID_PREFIX}${nodeId}`}
       data-test-id={TEST_ID.ARTICLE_COMMENT_FEED}
+      onAnimationEnd={() => {
+        if (isNewPostComment) {
+          sessionStorage.remove(NEW_POST_COMMENT_MUTATION_RESULT)
+        }
+      }}
     >
       <header className={styles.header}>
         <section className={styles.left}>
diff --git a/src/components/Comment/Feed/styles.module.css b/src/components/Comment/Feed/styles.module.css
index 18241daef8..27c72a114e 100644
--- a/src/components/Comment/Feed/styles.module.css
+++ b/src/components/Comment/Feed/styles.module.css
@@ -1,3 +1,43 @@
+.playSlideDownFade {
+  overflow: hidden;
+  animation: slide-down-fade 1.6s;
+}
+
+@keyframes slide-down-fade {
+  0% {
+    max-height: 0;
+    padding-right: var(--sp16);
+    padding-left: var(--sp16);
+    margin-right: calc(-1 * var(--sp16));
+    margin-left: calc(-1 * var(--sp16));
+    background: var(--color-green-lighter);
+    opacity: 0;
+  }
+
+  /* 1s later */
+  62.5% {
+    background: var(--color-green-lighter);
+  }
+
+  /* keep the padding and margin not change */
+  99% {
+    padding-right: var(--sp16);
+    padding-left: var(--sp16);
+    margin-right: calc(-1 * var(--sp16));
+    margin-left: calc(-1 * var(--sp16));
+  }
+
+  100% {
+    max-height: 500px;
+    padding-right: 0;
+    padding-left: 0;
+    margin-right: 0;
+    margin-left: 0;
+    background: var(--color-white);
+    opacity: 1;
+  }
+}
+
 .header {
   @mixin flex-start-space-between;
 
diff --git a/src/components/Dialogs/ArticleCommentFormDialog/CommentForm/index.tsx b/src/components/Dialogs/ArticleCommentFormDialog/CommentForm/index.tsx
index 4ab5bca237..910e0852f3 100644
--- a/src/components/Dialogs/ArticleCommentFormDialog/CommentForm/index.tsx
+++ b/src/components/Dialogs/ArticleCommentFormDialog/CommentForm/index.tsx
@@ -2,8 +2,17 @@ import dynamic from 'next/dynamic'
 import { useContext, useEffect, useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
-import { MAX_ARTICLE_COMMENT_LENGTH } from '~/common/enums'
-import { dom, formStorage, sanitizeContent, stripHtml } from '~/common/utils'
+import {
+  MAX_ARTICLE_COMMENT_LENGTH,
+  NEW_POST_COMMENT_MUTATION_RESULT,
+} from '~/common/enums'
+import {
+  dom,
+  formStorage,
+  sanitizeContent,
+  sessionStorage,
+  stripHtml,
+} from '~/common/utils'
 import {
   Dialog,
   SpinnerBlock,
@@ -93,27 +102,35 @@ const CommentForm: React.FC<CommentFormProps> = ({
       await putComment({
         variables: { input },
         update: (cache, mutationResult) => {
+          const newComment = mutationResult.data?.putComment
+
+          if (!newComment) {
+            return
+          }
+
+          sessionStorage.set(NEW_POST_COMMENT_MUTATION_RESULT, newComment.id)
+
           if (!!parentId && !isInCommentDetail) {
             updateArticleComments({
               cache,
               articleId,
               commentId: parentId,
               type: 'addSecondaryComment',
-              comment: mutationResult.data?.putComment,
+              comment: newComment,
             })
           } else if (!!parentId && isInCommentDetail) {
             updateCommentDetail({
               cache,
               commentId: parentId || '',
               type: 'add',
-              comment: mutationResult.data?.putComment,
+              comment: newComment,
             })
           } else {
             updateArticleComments({
               cache,
               articleId,
               type: 'add',
-              comment: mutationResult.data?.putComment,
+              comment: newComment,
             })
           }
         },
diff --git a/src/components/Forms/ArticleCommentForm/index.tsx b/src/components/Forms/ArticleCommentForm/index.tsx
index b1c61174e2..a650da2bae 100644
--- a/src/components/Forms/ArticleCommentForm/index.tsx
+++ b/src/components/Forms/ArticleCommentForm/index.tsx
@@ -5,10 +5,17 @@ import { FormattedMessage, useIntl } from 'react-intl'
 
 import {
   MAX_ARTICLE_COMMENT_LENGTH,
+  NEW_POST_COMMENT_MUTATION_RESULT,
   OPEN_UNIVERSAL_AUTH_DIALOG,
   UNIVERSAL_AUTH_TRIGGER,
 } from '~/common/enums'
-import { dom, formStorage, sanitizeContent, stripHtml } from '~/common/utils'
+import {
+  dom,
+  formStorage,
+  sanitizeContent,
+  sessionStorage,
+  stripHtml,
+} from '~/common/utils'
 import {
   Button,
   SpinnerBlock,
@@ -113,6 +120,10 @@ export const ArticleCommentForm: React.FC<ArticleCommentFormProps> = ({
       await putComment({
         variables: { input },
         update: (cache, mutationResult) => {
+          sessionStorage.set(
+            NEW_POST_COMMENT_MUTATION_RESULT,
+            mutationResult.data?.putComment?.id || ''
+          )
           if (!!parentId && !isInCommentDetail) {
             updateArticleComments({
               cache,
diff --git a/src/components/Forms/MomentCommentForm/index.tsx b/src/components/Forms/MomentCommentForm/index.tsx
index dbd7f04564..9101d05ae5 100644
--- a/src/components/Forms/MomentCommentForm/index.tsx
+++ b/src/components/Forms/MomentCommentForm/index.tsx
@@ -6,11 +6,17 @@ import { FormattedMessage, useIntl } from 'react-intl'
 
 import {
   MAX_MOMENT_COMMENT_LENGTH,
+  NEW_POST_COMMENT_MUTATION_RESULT,
   OPEN_UNIVERSAL_AUTH_DIALOG,
   UNIVERSAL_AUTH_TRIGGER,
   UPDATE_NEWEST_MOMENT_COMMENT,
 } from '~/common/enums'
-import { formStorage, sanitizeContent, stripHtml } from '~/common/utils'
+import {
+  formStorage,
+  sanitizeContent,
+  sessionStorage,
+  stripHtml,
+} from '~/common/utils'
 import {
   Button,
   SpinnerBlock,
@@ -128,6 +134,8 @@ const MomentCommentForm = ({
             return
           }
 
+          sessionStorage.set(NEW_POST_COMMENT_MUTATION_RESULT, newComment.id)
+
           updateMomentDetail({
             cache,
             shortHash: moment.shortHash,

From d59d72a899b38663d6247b5886ad4dab3a374911 Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:38:14 +0800
Subject: [PATCH 4/6] feat(comment): add delete animation for comments

---
 .../DropdownActions/DeleteComment/Dialog.tsx  | 43 ++++++++++++--
 .../DeleteComment/styles.module.css           | 56 +++++++++++++++++++
 src/components/Comment/Feed/index.tsx         |  1 +
 src/components/Comment/Feed/styles.module.css | 34 ++++++++---
 .../Dialogs/MomentDetailDialog/Comments.tsx   |  4 +-
 .../MomentDetailDialog/styles.module.css      |  4 +-
 6 files changed, 124 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Comment/DropdownActions/DeleteComment/styles.module.css

diff --git a/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx b/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
index 9bc5736948..0e4513ecf2 100644
--- a/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
+++ b/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 import { FormattedMessage } from 'react-intl'
 
-import { TEST_ID } from '~/common/enums'
+import { COMMENT_FEED_ID_PREFIX, TEST_ID } from '~/common/enums'
 import {
   Dialog,
   toast,
@@ -15,6 +15,8 @@ import {
   DeleteCommentMutation,
 } from '~/gql/graphql'
 
+import styles from './styles.module.css'
+
 const DELETE_COMMENT = gql`
   mutation DeleteComment($id: ID!) {
     deleteComment(input: { id: $id }) {
@@ -42,7 +44,7 @@ const DeleteCommentDialog = ({
 }: DeleteCommentDialogProps) => {
   const { show, openDialog, closeDialog } = useDialogSwitch(true)
   const { routerLang } = useRoute()
-  const commentId = comment.id
+  const { id, parentComment } = comment
   const node =
     comment.node.__typename === 'Article' ||
     comment.node.__typename === 'Moment'
@@ -50,12 +52,15 @@ const DeleteCommentDialog = ({
       : undefined
   const isArticle = comment.node.__typename === 'Article'
   const isMoment = comment.node.__typename === 'Moment'
+  const isDescendantComment = parentComment !== null
+
+  const nodeId = parentComment ? `${parentComment.id}-${id}` : id
 
   const [deleteComment] = useMutation<DeleteCommentMutation>(DELETE_COMMENT, {
-    variables: { id: commentId },
+    variables: { id: id },
     optimisticResponse: {
       deleteComment: {
-        id: commentId,
+        id: id,
         state: 'archived' as any,
         node:
           isMoment && node?.__typename === 'Moment'
@@ -122,6 +127,32 @@ const DeleteCommentDialog = ({
     })
   }
 
+  const playAnimationAndDelete = async () => {
+    // play animation
+    const commentElements = document.querySelectorAll(
+      `#${COMMENT_FEED_ID_PREFIX}${nodeId}`
+    )
+    if (commentElements.length > 0 && !isDescendantComment) {
+      commentElements.forEach((commentElement) => {
+        commentElement.parentElement?.classList.add(styles.deletedComment)
+      })
+    } else if (commentElements.length > 0 && isDescendantComment) {
+      commentElements.forEach((commentElement) => {
+        commentElement.parentElement?.classList.add(
+          styles.deletedDescendantComment
+        )
+      })
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 1600))
+
+    commentElements.forEach((commentElement) => {
+      commentElement.parentElement?.classList.add(styles.hideComment)
+    })
+
+    await onDelete()
+  }
+
   return (
     <>
       {children({ openDialog })}
@@ -171,7 +202,7 @@ const DeleteCommentDialog = ({
               text={<FormattedMessage defaultMessage="Delete" id="K3r6DQ" />}
               color="red"
               onClick={() => {
-                onDelete()
+                playAnimationAndDelete()
                 closeDialog()
               }}
             />
@@ -181,7 +212,7 @@ const DeleteCommentDialog = ({
               text={<FormattedMessage defaultMessage="Delete" id="K3r6DQ" />}
               color="red"
               onClick={() => {
-                onDelete()
+                playAnimationAndDelete()
                 closeDialog()
               }}
             />
diff --git a/src/components/Comment/DropdownActions/DeleteComment/styles.module.css b/src/components/Comment/DropdownActions/DeleteComment/styles.module.css
new file mode 100644
index 0000000000..cf858e5a79
--- /dev/null
+++ b/src/components/Comment/DropdownActions/DeleteComment/styles.module.css
@@ -0,0 +1,56 @@
+.hideComment {
+  display: none;
+}
+
+.deletedComment {
+  overflow: hidden;
+  animation:
+    slide-up-fade 1.6s,
+    maintain-padding 1.6s;
+}
+
+.deletedDescendantComment {
+  overflow: hidden;
+  animation: slide-up-fade 1.6s;
+}
+
+@keyframes slide-up-fade {
+  0% {
+    max-height: 500px;
+    background: var(--color-insufficient-red);
+  }
+
+  /* 1s later */
+  62.5% {
+    background: var(--color-insufficient-red);
+  }
+
+  100% {
+    display: none;
+    max-height: 0;
+    background: var(--color-white);
+  }
+}
+
+@keyframes maintain-padding {
+  0% {
+    padding-right: var(--sp16);
+    padding-left: var(--sp16);
+    margin-right: calc(-1 * var(--sp16));
+    margin-left: calc(-1 * var(--sp16));
+  }
+
+  99% {
+    padding-right: var(--sp16);
+    padding-left: var(--sp16);
+    margin-right: calc(-1 * var(--sp16));
+    margin-left: calc(-1 * var(--sp16));
+  }
+
+  100% {
+    padding-right: 0;
+    padding-left: 0;
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
diff --git a/src/components/Comment/Feed/index.tsx b/src/components/Comment/Feed/index.tsx
index 6f26c20b34..f710e5e383 100644
--- a/src/components/Comment/Feed/index.tsx
+++ b/src/components/Comment/Feed/index.tsx
@@ -93,6 +93,7 @@ const BaseCommentFeed = ({
   const commentClasses = classNames({
     [styles.comment]: true,
     [styles.playSlideDownFade]: isNewPostComment,
+    [styles.momentComment]: isMoment,
   })
 
   return (
diff --git a/src/components/Comment/Feed/styles.module.css b/src/components/Comment/Feed/styles.module.css
index 27c72a114e..09b4e30163 100644
--- a/src/components/Comment/Feed/styles.module.css
+++ b/src/components/Comment/Feed/styles.module.css
@@ -1,15 +1,21 @@
+.momentComment {
+  padding: var(--sp8) 0;
+
+  @media (--sm-up) {
+    padding: var(--sp12) 0;
+  }
+}
+
 .playSlideDownFade {
   overflow: hidden;
-  animation: slide-down-fade 1.6s;
+  animation:
+    slide-down-fade 1.6s,
+    maintain-padding 1.6s;
 }
 
 @keyframes slide-down-fade {
   0% {
     max-height: 0;
-    padding-right: var(--sp16);
-    padding-left: var(--sp16);
-    margin-right: calc(-1 * var(--sp16));
-    margin-left: calc(-1 * var(--sp16));
     background: var(--color-green-lighter);
     opacity: 0;
   }
@@ -19,6 +25,21 @@
     background: var(--color-green-lighter);
   }
 
+  100% {
+    max-height: 500px;
+    background: var(--color-white);
+    opacity: 1;
+  }
+}
+
+@keyframes maintain-padding {
+  0% {
+    padding-right: var(--sp16);
+    padding-left: var(--sp16);
+    margin-right: calc(-1 * var(--sp16));
+    margin-left: calc(-1 * var(--sp16));
+  }
+
   /* keep the padding and margin not change */
   99% {
     padding-right: var(--sp16);
@@ -28,13 +49,10 @@
   }
 
   100% {
-    max-height: 500px;
     padding-right: 0;
     padding-left: 0;
     margin-right: 0;
     margin-left: 0;
-    background: var(--color-white);
-    opacity: 1;
   }
 }
 
diff --git a/src/components/Dialogs/MomentDetailDialog/Comments.tsx b/src/components/Dialogs/MomentDetailDialog/Comments.tsx
index a8565996f7..f179f102e8 100644
--- a/src/components/Dialogs/MomentDetailDialog/Comments.tsx
+++ b/src/components/Dialogs/MomentDetailDialog/Comments.tsx
@@ -151,12 +151,12 @@ const Comments = ({ moment, editing }: CommentsProps) => {
             eofSpacingTop="base"
           >
             <Media at="sm">
-              <List spacing={['base', 0]} hasBorder={false}>
+              <List spacing={[0, 0]} hasBorder={false}>
                 {CommentsList}
               </List>
             </Media>
             <Media greaterThan="sm">
-              <List spacing={['loose', 0]} hasBorder={false}>
+              <List spacing={[0, 0]} hasBorder={false}>
                 {CommentsList}
               </List>
             </Media>
diff --git a/src/components/Dialogs/MomentDetailDialog/styles.module.css b/src/components/Dialogs/MomentDetailDialog/styles.module.css
index b029973281..4e5a566a20 100644
--- a/src/components/Dialogs/MomentDetailDialog/styles.module.css
+++ b/src/components/Dialogs/MomentDetailDialog/styles.module.css
@@ -55,13 +55,13 @@
   }
 
   & .title {
-    margin-bottom: var(--sp16);
+    margin-bottom: var(--sp8);
     font-size: var(--text15);
     line-height: 1.75;
     color: var(--color-black);
 
     @media (--sm-up) {
-      margin-bottom: var(--sp24);
+      margin-bottom: var(--sp12);
     }
 
     & .count {

From 978098e89fa2efcce79e9d019255f09e861283b9 Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:57:18 +0800
Subject: [PATCH 5/6] refactor(comments): improve delete animation using event
 listeners

---
 .../DropdownActions/DeleteComment/Dialog.tsx    | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx b/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
index 0e4513ecf2..a145a3237a 100644
--- a/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
+++ b/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
@@ -132,6 +132,15 @@ const DeleteCommentDialog = ({
     const commentElements = document.querySelectorAll(
       `#${COMMENT_FEED_ID_PREFIX}${nodeId}`
     )
+
+    if (commentElements.length > 0) {
+      commentElements.forEach((commentElement) => {
+        commentElement.parentElement?.addEventListener('animationend', () => {
+          commentElement.parentElement?.classList.add(styles.hideComment)
+          onDelete()
+        })
+      })
+    }
     if (commentElements.length > 0 && !isDescendantComment) {
       commentElements.forEach((commentElement) => {
         commentElement.parentElement?.classList.add(styles.deletedComment)
@@ -143,14 +152,6 @@ const DeleteCommentDialog = ({
         )
       })
     }
-
-    await new Promise((resolve) => setTimeout(resolve, 1600))
-
-    commentElements.forEach((commentElement) => {
-      commentElement.parentElement?.classList.add(styles.hideComment)
-    })
-
-    await onDelete()
   }
 
   return (

From febaca8393d5cc71aad6f4e3b64d5db58ace9719 Mon Sep 17 00:00:00 2001
From: Kechicode <186776112+Kechicode@users.noreply.github.com>
Date: Tue, 10 Dec 2024 14:39:38 +0800
Subject: [PATCH 6/6] fix(DeleteComment): merge onDelete into
 playAnimationAndDelete

---
 .../DropdownActions/DeleteComment/Dialog.tsx  | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx b/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
index a145a3237a..db10a00239 100644
--- a/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
+++ b/src/components/Comment/DropdownActions/DeleteComment/Dialog.tsx
@@ -108,25 +108,6 @@ const DeleteCommentDialog = ({
     },
   })
 
-  const onDelete = async () => {
-    await deleteComment()
-
-    toast.success({
-      message: isMoment ? (
-        <FormattedMessage
-          defaultMessage="Comment has been deleted"
-          description="Moment"
-          id="u9LYjQ"
-        />
-      ) : (
-        <FormattedMessage
-          defaultMessage="Comment has been deleted"
-          id="HbEL82"
-        />
-      ),
-    })
-  }
-
   const playAnimationAndDelete = async () => {
     // play animation
     const commentElements = document.querySelectorAll(
@@ -137,7 +118,7 @@ const DeleteCommentDialog = ({
       commentElements.forEach((commentElement) => {
         commentElement.parentElement?.addEventListener('animationend', () => {
           commentElement.parentElement?.classList.add(styles.hideComment)
-          onDelete()
+          deleteComment()
         })
       })
     }
@@ -152,6 +133,21 @@ const DeleteCommentDialog = ({
         )
       })
     }
+
+    toast.success({
+      message: isMoment ? (
+        <FormattedMessage
+          defaultMessage="Comment has been deleted"
+          description="Moment"
+          id="u9LYjQ"
+        />
+      ) : (
+        <FormattedMessage
+          defaultMessage="Comment has been deleted"
+          id="HbEL82"
+        />
+      ),
+    })
   }
 
   return (