[Content] Prevent UI jank when creating or posting reply to a comment (#3294)

[Content---nar-test-2---Zesty-io---zesty-pw---Manager
(2).webm](https://github.com/user-attachments/assets/962dd828-6d9f-4aee-8a5b-0ca75aaf83a1)

Author: finnar-bin

Diff for: src/shell/components/Comment/CommentItem.tsx

@@ -55,6 +55,7 @@ type CommentItemProps = {
   withResolveButton?: boolean;
   withReopenButton?: boolean;
   onParentCommentDeleted: () => void;
+  commentCount: number;
 };
 export const CommentItem = ({
   commentZUID,
@@ -65,6 +66,7 @@ export const CommentItem = ({
   withResolveButton,
   withReopenButton,
   onParentCommentDeleted,
+  commentCount,
 }: CommentItemProps) => {
   const { resourceZUID } = useParams<PathParams>();
   const location = useLocation();
@@ -229,6 +231,7 @@ export const CommentItem = ({
               onCancel={() => setCommentZUIDtoEdit(null)}
               commentResourceZUID={resourceZUID}
               parentCommentZUID={parentCommentZUID}
+              commentCount={commentCount}
             />
           ) : (
             <Typography

Diff for: src/shell/components/Comment/CommentsList.tsx

@@ -172,6 +172,7 @@ export const CommentsList = ({
                 withReopenButton={index === 0 && isResolved}
                 parentCommentZUID={parentCommentZUID}
                 onParentCommentDeleted={onClose}
+                commentCount={commentThread?.length || 0}
               />
               {index + 1 < commentThread?.length && (
                 <Divider sx={{ my: 1.5 }} />
@@ -209,6 +210,7 @@ export const CommentsList = ({
               onCancel={onClose}
               commentResourceZUID={resourceZUID}
               parentCommentZUID={parentCommentZUID}
+              commentCount={commentThread?.length || 0}
             />
           )}
         </Paper>

Diff for: src/shell/components/Comment/InputField.tsx

@@ -27,6 +27,7 @@ type InputFieldProps = {
   parentCommentZUID: string;
   isEditMode?: boolean;
   editModeValue?: string;
+  commentCount: number;
 };
 export const InputField = ({
   isFirstComment,
@@ -35,6 +36,7 @@ export const InputField = ({
   parentCommentZUID,
   isEditMode = false,
   editModeValue = "",
+  commentCount,
 }: InputFieldProps) => {
   const [
     createComment,
@@ -78,6 +80,7 @@ export const InputField = ({
   const [initialValue, setInitialValue] = useState(PLACEHOLDER);
   const [mentionListAnchorEl, setMentionListAnchorEl] = useState(null);
   const [userFilterKeyword, setUserFilterKeyword] = useState("");
+  const [prevCommentCount, setPrevCommentCount] = useState(commentCount);
 
   const handleSubmit = () => {
     if (isFirstComment) {
@@ -164,14 +167,18 @@ export const InputField = ({
   }, [inputValue, isEditMode]);
 
   useEffect(() => {
-    if (isCommentCreated || isReplyCreated) {
+    if (
+      (isCommentCreated || isReplyCreated) &&
+      prevCommentCount !== commentCount
+    ) {
       tinymce?.activeEditor.setContent(PLACEHOLDER);
       setInputValue("");
       updateComments({
         [commentResourceZUID]: "",
       });
+      setPrevCommentCount(commentCount);
     }
-  }, [isCommentCreated, isReplyCreated]);
+  }, [isCommentCreated, isReplyCreated, prevCommentCount, commentCount]);
 
   useEffect(() => {
     if (isCommentUpdated || isReplyUpdated) {
@@ -233,6 +240,7 @@ export const InputField = ({
           <Editor
             id="commentInputField"
             initialValue={initialValue}
+            disabled={isLoading}
             init={{
               inline: true,