From 71975f307ccedff47bcbe910ced018e1c8734b12 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Mon, 3 Oct 2022 14:33:00 -0600
Subject: [PATCH] Show resolve loading indicator

---
 web/components/button.tsx              | 6 +++++-
 web/components/confirmation-button.tsx | 7 +++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/components/button.tsx b/web/components/button.tsx
index ecd8e1c7..90e087c8 100644
--- a/web/components/button.tsx
+++ b/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>
   )
diff --git a/web/components/confirmation-button.tsx b/web/components/confirmation-button.tsx
index 87c98f0a..e0f7efd8 100644
--- a/web/components/confirmation-button.tsx
+++ b/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}
     >