add submitting state to CommentInput

src/components/CommentInput/CommentInput.jsx

@@ -73,6 +73,7 @@ const CommentInput = ({
   const [files, setFiles] = useState(initFiles)
   const [filesUploading, setFilesUploading] = useState([])
   const [isDropping, setIsDropping] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
 
   const { annotations, removeAnnotation, goToAnnotation } = useAnnotationsSync({
     entityId: entities[0]?.id,
@@ -442,6 +443,7 @@ const CommentInput = ({
 
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       // upload any annotations first
       let annotationFiles = []
       if (annotations.length) {
@@ -470,6 +472,8 @@ const CommentInput = ({
     } catch (error) {
       console.error(error)
       toast.error('Something went wrong')
+    } finally {
+      setIsSubmitting(false);
     }
   }
 
@@ -559,6 +563,7 @@ const CommentInput = ({
             isDropping,
             disabled,
             isLoading,
+            isSubmitting,
           })}
           onKeyDown={handleKeyDown}
           onClick={handleOpenClick}

src/components/CommentInput/CommentInput.styled.js

@@ -253,12 +253,17 @@ export const Comment = styled.div`
     background-color: var(--md-sys-color-surface-container-lowest);
   }
 
-  &.isLoading {
+  &.isLoading,
+  &.isSubmitting {
     cursor: default;
     pointer-events: none;
     user-select: none;
   }
 
+  &.isSubmitting {
+    opacity: 0.3;
+  }
+
   /* toolbar styles */
   .ql-toolbar.ql-snow {
     border: none;