refactor(console): use button loading in experience flow if possible

[xiaoyijun]

Summary

This refactoring aims to provide a more responsive and user-friendly experience by avoiding global loading indicators as much as possible:

• Refactor LoadingLayer
  • Introduce LoadingMask component to prevent user input during loading states.
  • Introduce LoadingMask to hide the global loading icon when loading
• Implement button loading states in various forms and actions
• Add continue buttons to verification code and MFA flows
• Improve error handling and state management in forms
• Enhance user feedback during form submissions and asynchronous operations

Testing

Sign in

Password

Verification code

Sign up

Password

Verification code

Setup profile

Forgot password

MFA

MFA verfication

TOTP

Passkey

Backup code

MFA binding

TOTP

Passkey

Backup code

SSO

Social sign-in

Checklist

- [ ] .changeset - [ ] unit tests - [ ] integration tests - [ ] necessary TSDoc comments

[github-actions[bot]]

COMPARE TO master

Total Size Diff :chart_with_upwards_trend: +3.04 KB

Diff by File

|Name|Diff| |---|---| |packages/experience/src/Providers/LoadingLayerProvider/index.tsx|:chart_with_upwards_trend: +132 Bytes| |packages/experience/src/components/LoadingLayer/index.module.scss|:chart_with_upwards_trend: +87 Bytes| |packages/experience/src/components/LoadingLayer/index.tsx|:chart_with_upwards_trend: +32 Bytes| |packages/experience/src/components/LoadingMask/index.module.scss|:chart_with_upwards_trend: +118 Bytes| |packages/experience/src/components/LoadingMask/index.tsx|:chart_with_upwards_trend: +279 Bytes| |packages/experience/src/containers/SetPassword/Lite.tsx|:chart_with_upwards_trend: +91 Bytes| |packages/experience/src/containers/SetPassword/SetPassword.tsx|:chart_with_upwards_trend: +91 Bytes| |packages/experience/src/containers/SetPassword/index.tsx|:chart_with_upwards_trend: +9 Bytes| |packages/experience/src/containers/TotpCodeVerification/index.module.scss|:chart_with_upwards_trend: +46 Bytes| |packages/experience/src/containers/TotpCodeVerification/index.tsx|:chart_with_upwards_trend: +705 Bytes| |packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts|:chart_with_upwards_trend: +7 Bytes| |packages/experience/src/containers/VerificationCode/index.module.scss|:chart_with_upwards_trend: +19 Bytes| |packages/experience/src/containers/VerificationCode/index.tsx|:chart_with_upwards_trend: +703 Bytes| |packages/experience/src/pages/Consent/index.tsx|:chart_with_upwards_trend: +160 Bytes| |packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx|:chart_with_upwards_trend: +33 Bytes| |packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx|:chart_with_upwards_trend: +68 Bytes| |packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx|:chart_with_upwards_trend: +206 Bytes| |packages/experience/src/pages/MfaBinding/WebAuthnBinding/index.tsx|:chart_with_upwards_trend: +225 Bytes| |packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx|:chart_with_upwards_trend: +70 Bytes| |packages/experience/src/pages/MfaVerification/WebAuthnVerification/index.tsx|:chart_with_upwards_trend: +201 Bytes| |packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx|:chart_with_upwards_trend: +47 Bytes| |packages/experience/src/pages/SignIn/IdentifierSignInForm/index.tsx|:chart_with_upwards_trend: +47 Bytes| |packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx|:chart_with_upwards_trend: +47 Bytes| |packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx|:chart_with_upwards_trend: +39 Bytes| |packages/experience/src/pages/SingleSignOnEmail/index.tsx|:chart_with_upwards_trend: +87 Bytes|