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 && } {children} ) 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'} -
{submitBtn?.label ?? 'Submit'} -
+ @@ -125,6 +127,7 @@ export function ResolveConfirmationButton(props: { submitBtn={{ label: 'Resolve', className: clsx('border-none', submitButtonClass), + isSubmitting, }} onSubmit={onResolve} >