diff --git a/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx b/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx index a68867e895f..2397c7ba1c3 100644 --- a/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx +++ b/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx @@ -25,6 +25,7 @@ export function NameQuickTransfer(props: NameQuickTransferProps): JSX.Element { const { t } = useTranslation('quick_transfer') const [name, setName] = React.useState('') const keyboardRef = React.useRef(null) + const [isSaving, setIsSaving] = React.useState(false) let error: string | null = null if (name.length > 60) { @@ -38,9 +39,10 @@ export function NameQuickTransfer(props: NameQuickTransferProps): JSX.Element { header={t('name_your_transfer')} buttonText={t('save')} onClickButton={() => { + setIsSaving(true) onSave(name) }} - buttonIsDisabled={name === '' || error != null} + buttonIsDisabled={name === '' || error != null || isSaving} /> { const { t } = useTranslation('quick_transfer') - const [showNameTransfer, setShowNameTransfer] = React.useState(false) + const [showNameTransfer, setShowNameTransfer] = React.useState(false) + const [isLoading, setIsLoading] = React.useState(false) return showNameTransfer ? ( @@ -43,6 +44,7 @@ export const SaveOrRunModal = (props: SaveOrRunModalProps): JSX.Element => { { setShowNameTransfer(true) }} @@ -51,7 +53,11 @@ export const SaveOrRunModal = (props: SaveOrRunModalProps): JSX.Element => { { + setIsLoading(true) + props.onRun() + }} /> diff --git a/app/src/organisms/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx b/app/src/organisms/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx index 744849b89a8..2f4682bc060 100644 --- a/app/src/organisms/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx +++ b/app/src/organisms/QuickTransferFlow/__tests__/NameQuickTransfer.test.tsx @@ -52,6 +52,7 @@ describe('NameQuickTransfer', () => { expect(saveBtn).toBeEnabled() fireEvent.click(saveBtn) expect(props.onSave).toHaveBeenCalled() + expect(saveBtn).toBeDisabled() }) it('disables save if you enter more than 60 characters', () => {