This PR refactors the ConfirmModal component and its related hooks to support a loading state in modals and applies it to the experience flow.
Notably, it introduces a new callback-based usage pattern for confirm modals, providing greater flexibility in handling modal actions while offering improved user feedback during asynchronous operations.
Key changes:
Added support for modal loading state:
Introduced isConfirmLoading prop to ModalProps and ConfirmModalState
Updated AcModal and MobileModal components to handle the loading state
Confirm button automatically enters loading state during async confirm actions when using callback-style confirm modals
Implemented callback-based confirm modal usage:
Created CallbackConfirmModalProps type with onConfirm and onCancel callbacks
Added showCallback method to ConfirmModalContextType
Updated ConfirmModalProvider to handle both promise-based and callback-based modal actions
Automatically manages confirm button loading state when executing async onConfirm callbacks
Separated promise-based and callback-based hooks:
Introduced usePromiseConfirmModal for promise-based usage
Modified useConfirmModal for callback-based usage, supporting loading state during async operations
Removed unused modal render props:
Simplified ModalContentRenderProps by removing confirm and cancel props
Updated ConfirmModalState to use a simpler ModalContent type
Updated test cases to cover both promise-based and callback-based scenarios, including loading state tests
Refactored various components and hooks to use the new modal APIs:
Updated use-identifier-error-alert, use-link-social-confirm-modal, use-register-flow-code-verification, use-sign-in-flow-code-verification, use-terms, and several pages to use the appropriate modal hooks
Async operations in these scenarios now automatically trigger the confirm button's loading state
Summary
This PR refactors the
ConfirmModal
component and its related hooks to support a loading state in modals and applies it to the experience flow.Notably, it introduces a new callback-based usage pattern for confirm modals, providing greater flexibility in handling modal actions while offering improved user feedback during asynchronous operations.
Key changes:
Added support for modal loading state:
isConfirmLoading
prop toModalProps
andConfirmModalState
AcModal
andMobileModal
components to handle the loading stateImplemented callback-based confirm modal usage:
CallbackConfirmModalProps
type withonConfirm
andonCancel
callbacksshowCallback
method toConfirmModalContextType
ConfirmModalProvider
to handle both promise-based and callback-based modal actionsonConfirm
callbacksSeparated promise-based and callback-based hooks:
usePromiseConfirmModal
for promise-based usageuseConfirmModal
for callback-based usage, supporting loading state during async operationsRemoved unused modal render props:
ModalContentRenderProps
by removingconfirm
andcancel
propsConfirmModalState
to use a simplerModalContent
typeUpdated test cases to cover both promise-based and callback-based scenarios, including loading state tests
Refactored various components and hooks to use the new modal APIs:
use-identifier-error-alert
,use-link-social-confirm-modal
,use-register-flow-code-verification
,use-sign-in-flow-code-verification
,use-terms
, and several pages to use the appropriate modal hooksTesting
https://github.com/user-attachments/assets/17a1ca40-9530-41ec-bde3-1d2aa819a4e1
https://github.com/user-attachments/assets/a6c1ecaf-16ef-4506-993c-196b4b528406
Checklist
.changeset