Show resolve loading indicator

web/components/button.tsx

@@ -1,5 +1,6 @@
 import { MouseEventHandler, ReactNode } from 'react'
 import clsx from 'clsx'
+import { LoadingIndicator } from 'web/components/loading-indicator'
 
 export type SizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 export type ColorType =
@@ -21,6 +22,7 @@ export function Button(props: {
   color?: ColorType
   type?: 'button' | 'reset' | 'submit'
   disabled?: boolean
+  loading?: boolean
 }) {
   const {
     children,
@@ -30,6 +32,7 @@ export function Button(props: {
     color = 'indigo',
     type = 'button',
     disabled = false,
+    loading,
   } = props
 
   const sizeClasses = {
@@ -68,9 +71,10 @@ export function Button(props: {
           'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none',
         className
       )}
-      disabled={disabled}
+      disabled={disabled || loading}
       onClick={onClick}
     >
+      {loading && <LoadingIndicator className={'mr-2 border-gray-500'} />}
       {children}
     </button>
   )

web/components/confirmation-button.tsx

@@ -21,6 +21,7 @@ export function ConfirmationButton(props: {
   submitBtn?: {
     label?: string
     className?: string
+    isSubmitting?: boolean
   }
   children: ReactNode
   onSubmit?: () => void
@@ -58,7 +59,7 @@ export function ConfirmationButton(props: {
             >
               {cancelBtn?.label ?? 'Cancel'}
             </div>
-            <div
+            <Button
               className={clsx('btn', submitBtn?.className)}
               onClick={
                 onSubmitWithSuccess
@@ -68,9 +69,10 @@ export function ConfirmationButton(props: {
                       )
                   : onSubmit
               }
+              loading={submitBtn?.isSubmitting}
             >
               {submitBtn?.label ?? 'Submit'}
-            </div>
+            </Button>
           </Row>
         </Col>
       </Modal>
@@ -125,6 +127,7 @@ export function ResolveConfirmationButton(props: {
       submitBtn={{
         label: 'Resolve',
         className: clsx('border-none', submitButtonClass),
+        isSubmitting,
       }}
       onSubmit={onResolve}
     >