feat: add loading indicator in continue to sign in button (#7799)

frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/continue_with/continue_with_magic_link_or_passcode_page.dart

@@ -35,6 +35,8 @@ class _ContinueWithMagicLinkOrPasscodePageState
 
   final inputPasscodeKey = GlobalKey<AFTextFieldState>();
 
+  bool isSubmitting = false;
+
   @override
   void dispose() {
     passcodeController.dispose();
@@ -54,6 +56,10 @@ class _ContinueWithMagicLinkOrPasscodePageState
             );
           });
         }
+
+        if (state.isSubmitting != isSubmitting) {
+          setState(() => isSubmitting = state.isSubmitting);
+        }
       },
       child: Scaffold(
         body: Center(
@@ -81,6 +87,15 @@ class _ContinueWithMagicLinkOrPasscodePageState
   List<Widget> _buildEnterCodeManually() {
     // todo: ask designer to provide the spacing
     final spacing = VSpace(20);
+    final textStyle = AFButtonSize.l.buildTextStyle(context);
+    final textHeight = textStyle.height;
+    final textFontSize = textStyle.fontSize;
+
+    // the indicator height is the height of the text style.
+    double indicatorHeight = 20;
+    if (textHeight != null && textFontSize != null) {
+      indicatorHeight = textHeight * textFontSize;
+    }
 
     if (!isEnteringPasscode) {
       return [
@@ -116,7 +131,18 @@ class _ContinueWithMagicLinkOrPasscodePageState
       VSpace(12),
 
       // continue to login
-      AFFilledTextButton.primary(
+      !isSubmitting
+          ? _buildContinueButton(textStyle: textStyle)
+          : _buildIndicator(indicatorHeight: indicatorHeight),
+
+      spacing,
+    ];
+  }
+
+  Widget _buildContinueButton({
+    required TextStyle textStyle,
+  }) {
+    return AFFilledTextButton.primary(
       text: LocaleKeys.signIn_continueToSignIn.tr(),
       onTap: () {
         final passcode = passcodeController.text;
@@ -128,12 +154,30 @@ class _ContinueWithMagicLinkOrPasscodePageState
           widget.onEnterPasscode(passcode);
         }
       },
+      textStyle: textStyle.copyWith(
+        color: AppFlowyTheme.of(context).textColorScheme.onFill,
+      ),
       size: AFButtonSize.l,
       alignment: Alignment.center,
-      ),
+    );
+  }
 
-      spacing,
+  Widget _buildIndicator({
-    ];
+    required double indicatorHeight,
+  }) {
+    return AFFilledButton.disabled(
+      size: AFButtonSize.l,
+      builder: (context, isHovering, disabled) {
+        return Align(
+          child: SizedBox.square(
+            dimension: indicatorHeight,
+            child: CircularProgressIndicator(
+              strokeWidth: 3.0,
+            ),
+          ),
+        );
+      },
+    );
   }
 
   List<Widget> _buildBackToLogin() {