diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx index a3f5350b0bb15c7110b5f054124b3950e7fa6b11..e3357ca96d3b9f8b4bcab6e701cb888cf51ccd5a 100644 --- a/src/components/Connection/ConnectionResult.tsx +++ b/src/components/Connection/ConnectionResult.tsx @@ -22,6 +22,7 @@ import { FluidState, FluidType } from 'enum/fluid.enum' import { DateTime } from 'luxon' import DeleteGRDFAccountModal from './DeleteGRDFAccountModal' import TriggerService from 'services/triggers.service' +import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner' interface ConnectionResultProps { fluidStatus: FluidStatus @@ -39,6 +40,7 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({ const dispatch = useDispatch() const account: Account | null = fluidStatus.connection.account + const [deleting, setDeleting] = useState<boolean>(false) const [updating, setUpdating] = useState<boolean>(false) const [lastExecutionDate, setLastExecutionDate] = useState<string | DateTime>( '-' @@ -68,7 +70,7 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({ } const deleteAccountsAndTriggers = useCallback(async () => { - setUpdating(true) + setDeleting(true) try { if (account) { const accountService = new AccountService(client) @@ -86,13 +88,12 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({ await handleAccountDeletion() } } catch (error) { - setUpdating(false) + setDeleting(false) } }, [account, client, handleAccountDeletion]) const isOutdated = useCallback(() => { const dateChartService = new DateChartService() - return dateChartService.isDataOutdated(fluidStatus.lastDataDate, fluidType) }, [fluidStatus, fluidType]) @@ -260,13 +261,17 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({ ? toggleGRDFDeletionModal : deleteAccountsAndTriggers } - disabled={updating} + disabled={updating || deleting} classes={{ root: 'btn-secondary-positive', label: 'text-16-normal', }} > - {t('konnector_form.button_delete')} + {deleting ? ( + <StyledSpinner size="1rem" fluidType={fluidType} /> + ) : ( + t('konnector_form.button_delete') + )} </Button> <Button aria-label={t('konnector_form.accessibility.button_update')} @@ -275,14 +280,14 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({ ? handleRefreshConsent : updateKonnector } - disabled={updating} + disabled={updating || deleting} classes={{ root: 'btn-highlight', label: 'text-16-bold', }} > {updating ? ( - <StyledBlackSpinner size="2em" /> + <StyledBlackSpinner size="1rem" /> ) : ( <div> {konnectorError === 'error_update_oauth'