Links prefetching (#225)

1. Marketing Layout: speed up rendering by retrieving user session from cookies instead of using server side request
2. Use "redirecting" state when signing in to keep displaying a loading state while Next.js redirects to home page
3. Use "useCallback" to prevent double tracking when switching pages
4. Add links pre-fetching in marketing navigation
5. Add new pending state to MFA verification form
6. Pre-fetch sign-in/sign-up pages
7. Fix i18n when using regional languages
8. currency formatter should default to the region if it exists
9. Update packages

packages/features/auth/src/components/multi-factor-challenge-container.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect } from 'react';
 
+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useMutation } from '@tanstack/react-query';
@@ -41,9 +43,11 @@ export function MultiFactorChallengeContainer({
     redirectPath: string;
   };
 }>) {
+  const router = useRouter();
+
   const verifyMFAChallenge = useVerifyMFAChallenge({
     onSuccess: () => {
-      window.location.replace(paths.redirectPath);
+      router.replace(paths.redirectPath);
     },
   });
 
@@ -156,14 +160,29 @@ export function MultiFactorChallengeContainer({
             data-test={'submit-mfa-button'}
             disabled={
               verifyMFAChallenge.isPending ||
+              verifyMFAChallenge.isSuccess ||
               !verificationCodeForm.formState.isValid
             }
           >
-            {verifyMFAChallenge.isPending ? (
-              <Trans i18nKey={'account:verifyingCode'} />
-            ) : (
+            <If condition={verifyMFAChallenge.isPending}>
+              <span className={'animate-in fade-in slide-in-from-bottom-24'}>
+                <Trans i18nKey={'account:verifyingCode'} />
+              </span>
+            </If>
+
+            <If condition={verifyMFAChallenge.isSuccess}>
+              <span className={'animate-in fade-in slide-in-from-bottom-24'}>
+                <Trans i18nKey={'auth:redirecting'} />
+              </span>
+            </If>
+
+            <If
+              condition={
+                !verifyMFAChallenge.isPending && !verifyMFAChallenge.isSuccess
+              }
+            >
               <Trans i18nKey={'account:submitVerificationCode'} />
-            )}
+            </If>
           </Button>
         </div>
       </form>
@@ -231,7 +250,7 @@ function FactorsListContainer({
       <div className={'flex flex-col items-center space-y-4 py-8'}>
         <Spinner />
 
-        <div>
+        <div className={'text-sm'}>
           <Trans i18nKey={'account:loadingFactors'} />
         </div>
       </div>
@@ -259,7 +278,7 @@ function FactorsListContainer({
   const verifiedFactors = factors?.totp ?? [];
 
   return (
-    <div className={'flex flex-col space-y-4'}>
+    <div className={'flex flex-col space-y-4 animate-in fade-in duration-500'}>
       <div>
         <span className={'font-medium'}>
           <Trans i18nKey={'account:selectFactor'} />

packages/features/auth/src/components/password-sign-in-container.tsx

@@ -19,6 +19,7 @@ export function PasswordSignInContainer({
   const { captchaToken, resetCaptchaToken } = useCaptchaToken();
   const signInMutation = useSignInWithEmailPassword();
   const isLoading = signInMutation.isPending;
+  const isRedirecting = signInMutation.isSuccess;
 
   const onSubmit = useCallback(
     async (credentials: z.infer<typeof PasswordSignInSchema>) => {
@@ -46,7 +47,11 @@ export function PasswordSignInContainer({
     <>
       <AuthErrorAlert error={signInMutation.error} />
 
-      <PasswordSignInForm onSubmit={onSubmit} loading={isLoading} />
+      <PasswordSignInForm
+        onSubmit={onSubmit}
+        loading={isLoading}
+        redirecting={isRedirecting}
+      />
     </>
   );
 }

packages/features/auth/src/components/password-sign-in-form.tsx

@@ -25,10 +25,12 @@ import { PasswordSignInSchema } from '../schemas/password-sign-in.schema';
 
 export function PasswordSignInForm({
   onSubmit,
-  loading,
+  loading = false,
+  redirecting = false,
 }: {
   onSubmit: (params: z.infer<typeof PasswordSignInSchema>) => unknown;
   loading: boolean;
+  redirecting: boolean;
 }) {
   const { t } = useTranslation('auth');
 
@@ -112,23 +114,30 @@ export function PasswordSignInForm({
           data-test="auth-submit-button"
           className={'group w-full'}
           type="submit"
-          disabled={loading}
+          disabled={loading || redirecting}
         >
-          <If
-            condition={loading}
-            fallback={
-              <>
-                <Trans i18nKey={'auth:signInWithEmail'} />
+          <If condition={redirecting}>
+            <span className={'animate-in fade-in slide-in-from-bottom-24'}>
+              <Trans i18nKey={'auth:redirecting'} />
+            </span>
+          </If>
 
-                <ArrowRight
-                  className={
-                    'zoom-in animate-in slide-in-from-left-2 fill-mode-both h-4 delay-500 duration-500'
-                  }
-                />
-              </>
-            }
-          >
-            <Trans i18nKey={'auth:signingIn'} />
+          <If condition={loading}>
+            <span className={'animate-in fade-in slide-in-from-bottom-24'}>
+              <Trans i18nKey={'auth:signingIn'} />
+            </span>
+          </If>
+
+          <If condition={!redirecting && !loading}>
+            <span className={'animate-out fade-out flex items-center'}>
+              <Trans i18nKey={'auth:signInWithEmail'} />
+
+              <ArrowRight
+                className={
+                  'zoom-in animate-in slide-in-from-left-2 fill-mode-both h-4 delay-500 duration-500'
+                }
+              />
+            </span>
           </If>
         </Button>
       </form>