Show loading indicator on comment submit

web/components/feed/feed-comments.tsx

@@ -23,6 +23,7 @@ import { SiteLink } from 'web/components/site-link'
 import { BetStatusText } from 'web/components/feed/feed-bets'
 import { Col } from 'web/components/layout/col'
 import { getOutcomeProbability } from 'common/calculate'
+import { LoadingIndicator } from 'web/components/loading-indicator'
 
 export function FeedCommentThread(props: {
   contract: Contract
@@ -372,14 +373,13 @@ export function CommentInput(props: {
                     Sign in to Comment
                   </button>
                 )}
-                {user && (
+                {user && !isSubmitting && (
                   <button
-                    disabled={isSubmitting}
                     className={clsx(
                       'btn text-transform: block capitalize',
                       focused && comment
                         ? 'btn-outline btn-sm '
-                        : 'btn-ghost btn-sm text-gray-500'
+                        : 'btn-ghost btn-sm pointer-events-none text-gray-500'
                     )}
                     onClick={() => {
                       if (!focused) return
@@ -391,6 +391,9 @@ export function CommentInput(props: {
                     {parentComment || answerOutcome ? 'Reply' : 'Comment'}
                   </button>
                 )}
+                {isSubmitting && (
+                  <LoadingIndicator spinnerClassName={'border-gray-500'} />
+                )}
               </Col>
             </Row>
           </div>

web/components/loading-indicator.tsx

@@ -1,12 +1,18 @@
 import clsx from 'clsx'
 
-export function LoadingIndicator(props: { className?: string }) {
-  const { className } = props
+export function LoadingIndicator(props: {
+  className?: string
+  spinnerClassName?: string
+}) {
+  const { className, spinnerClassName } = props
 
   return (
     <div className={clsx('flex items-center justify-center', className)}>
       <div
-        className="spinner-border inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-500 border-r-transparent"
+        className={clsx(
+          'spinner-border inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-500 border-r-transparent',
+          spinnerClassName
+        )}
         role="status"
       />
     </div>