refactor: separate loading states for comment operations

Separate loading states to distinguish between different operations:
- activeCommentDetailLoading: loading comment details, delete/resolve operations
- replySubmitting: sending new replies
- replyUpdating: editing existing replies

Changes:
- Add replySubmitting and replyUpdating states to comment store
- Restore full-screen loading overlay for comment detail loading
- Use inline spinner (RiLoader2Line) in send/save buttons for reply operations
- Update loading state usage in handleCommentReply and handleCommentReplyUpdate
- Pass separated loading states from workflow index to CommentThread component

Benefits:
- UI clarity: different loading states have appropriate visual feedback
- Better UX: users can still navigate while sending replies
- Clear separation of concerns: each operation has its own loading state

web/app/components/workflow/comment/thread.tsx

@@ -18,6 +18,8 @@ import { getUserColor } from '@/app/components/workflow/collaboration/utils/user
 type CommentThreadProps = {
   comment: WorkflowCommentDetail
   loading?: boolean
+  replySubmitting?: boolean
+  replyUpdating?: boolean
   onClose: () => void
   onDelete?: () => void
   onResolve?: () => void
@@ -135,6 +137,8 @@ const ThreadMessage: FC<{
 export const CommentThread: FC<CommentThreadProps> = memo(({
   comment,
   loading = false,
+  replySubmitting = false,
+  replyUpdating = false,
   onClose,
   onDelete,
   onResolve,
@@ -159,7 +163,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
   }, [comment.id])
 
   const handleReplySubmit = useCallback(async (content: string, mentionedUserIds: string[]) => {
-    if (!onReply || loading) return
+    if (!onReply || replySubmitting) return
 
     setReplyContent('')
 
@@ -170,7 +174,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
       console.error('Failed to send reply', error)
       setReplyContent(content)
     }
-  }, [onReply, loading])
+  }, [onReply, replySubmitting])
 
   const screenPosition = useMemo(() => {
     return flowToScreenPosition({
@@ -398,7 +402,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                           onCancel={handleCancelEdit}
                           placeholder={t('workflow.comments.placeholder.editReply')}
                           disabled={loading}
-                          loading={loading}
+                          loading={replyUpdating}
                           isEditing={true}
                           className="system-sm-regular"
                           autoFocus
@@ -420,6 +424,11 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
             </div>
           )}
         </div>
+        {loading && (
+          <div className='bg-components-panel-bg/70 absolute inset-0 z-30 flex items-center justify-center text-sm text-text-tertiary'>
+            {t('workflow.comments.loading')}
+          </div>
+        )}
         {onReply && (
           <div className='border-t border-components-panel-border px-4 py-3'>
             <div className='flex items-center gap-3'>
@@ -436,7 +445,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                   onSubmit={handleReplySubmit}
                   placeholder={t('workflow.comments.placeholder.reply')}
                   disabled={loading}
-                  loading={loading}
+                  loading={replySubmitting}
                 />
               </div>
             </div>