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
2025-03-31 10:06:37 +07:00
parent 7c4dd23e5d
commit 7a1903d0c2
35 changed files with 1685 additions and 1667 deletions
--- a/packages/billing/gateway/package.json
+++ b/packages/billing/gateway/package.json
@@ -29,10 +29,10 @@
    "@supabase/supabase-js": "2.49.3",
    "@types/react": "19.0.12",
    "date-fns": "^4.1.0",
-    "lucide-react": "^0.484.0",
+    "lucide-react": "^0.485.0",
    "next": "15.2.4",
-    "react": "19.0.0",
-    "react-hook-form": "^7.54.2",
+    "react": "19.1.0",
+    "react-hook-form": "^7.55.0",
    "react-i18next": "^15.4.1",
    "zod": "^3.24.2"
  },
--- a/packages/billing/lemon-squeezy/package.json
+++ b/packages/billing/lemon-squeezy/package.json
@@ -26,7 +26,7 @@
    "@kit/ui": "workspace:*",
    "@types/react": "19.0.12",
    "next": "15.2.4",
-    "react": "19.0.0",
+    "react": "19.1.0",
    "zod": "^3.24.2"
  },
  "typesVersions": {
--- a/packages/billing/stripe/package.json
+++ b/packages/billing/stripe/package.json
@@ -30,7 +30,7 @@
    "@types/react": "19.0.12",
    "date-fns": "^4.1.0",
    "next": "15.2.4",
-    "react": "19.0.0",
+    "react": "19.1.0",
    "zod": "^3.24.2"
  },
  "typesVersions": {
--- a/packages/cms/keystatic/package.json
+++ b/packages/cms/keystatic/package.json
@@ -28,7 +28,7 @@
    "@kit/ui": "workspace:*",
    "@types/node": "^22.13.14",
    "@types/react": "19.0.12",
-    "react": "19.0.0",
+    "react": "19.1.0",
    "zod": "^3.24.2"
  },
  "typesVersions": {
--- a/packages/features/accounts/package.json
+++ b/packages/features/accounts/package.json
@@ -35,15 +35,15 @@
    "@kit/ui": "workspace:*",
    "@radix-ui/react-icons": "^1.3.2",
    "@supabase/supabase-js": "2.49.3",
-    "@tanstack/react-query": "5.69.2",
+    "@tanstack/react-query": "5.70.0",
    "@types/react": "19.0.12",
    "@types/react-dom": "19.0.4",
-    "lucide-react": "^0.484.0",
+    "lucide-react": "^0.485.0",
    "next": "15.2.4",
    "next-themes": "0.4.6",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-hook-form": "^7.54.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.55.0",
    "react-i18next": "^15.4.1",
    "sonner": "^2.0.2",
    "zod": "^3.24.2"
--- a/packages/features/admin/package.json
+++ b/packages/features/admin/package.json
@@ -21,14 +21,14 @@
    "@makerkit/data-loader-supabase-core": "^0.0.10",
    "@makerkit/data-loader-supabase-nextjs": "^1.2.5",
    "@supabase/supabase-js": "2.49.3",
-    "@tanstack/react-query": "5.69.2",
+    "@tanstack/react-query": "5.70.0",
    "@tanstack/react-table": "^8.21.2",
    "@types/react": "19.0.12",
-    "lucide-react": "^0.484.0",
+    "lucide-react": "^0.485.0",
    "next": "15.2.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-hook-form": "^7.54.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.55.0",
    "zod": "^3.24.2"
  },
  "exports": {
--- a/packages/features/auth/package.json
+++ b/packages/features/auth/package.json
@@ -29,11 +29,11 @@
    "@marsidev/react-turnstile": "^1.1.0",
    "@radix-ui/react-icons": "^1.3.2",
    "@supabase/supabase-js": "2.49.3",
-    "@tanstack/react-query": "5.69.2",
+    "@tanstack/react-query": "5.70.0",
    "@types/react": "19.0.12",
-    "lucide-react": "^0.484.0",
+    "lucide-react": "^0.485.0",
    "next": "15.2.4",
-    "react-hook-form": "^7.54.2",
+    "react-hook-form": "^7.55.0",
    "react-i18next": "^15.4.1",
    "sonner": "^2.0.2",
    "zod": "^3.24.2"
--- a/packages/features/auth/src/components/multi-factor-challenge-container.tsx
+++ b/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'} />
--- a/packages/features/auth/src/components/password-sign-in-container.tsx
+++ b/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}
+      />
    </>
  );
 }
--- a/packages/features/auth/src/components/password-sign-in-form.tsx
+++ b/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>
--- a/packages/features/notifications/package.json
+++ b/packages/features/notifications/package.json
@@ -20,11 +20,11 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
    "@supabase/supabase-js": "2.49.3",
-    "@tanstack/react-query": "5.69.2",
+    "@tanstack/react-query": "5.70.0",
    "@types/react": "19.0.12",
-    "lucide-react": "^0.484.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "lucide-react": "^0.485.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
    "react-i18next": "^15.4.1"
  },
  "prettier": "@kit/prettier-config",
--- a/packages/features/team-accounts/package.json
+++ b/packages/features/team-accounts/package.json
@@ -33,17 +33,17 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
    "@supabase/supabase-js": "2.49.3",
-    "@tanstack/react-query": "5.69.2",
+    "@tanstack/react-query": "5.70.0",
    "@tanstack/react-table": "^8.21.2",
    "@types/react": "19.0.12",
    "@types/react-dom": "19.0.4",
    "class-variance-authority": "^0.7.1",
    "date-fns": "^4.1.0",
-    "lucide-react": "^0.484.0",
+    "lucide-react": "^0.485.0",
    "next": "15.2.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-hook-form": "^7.54.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.55.0",
    "react-i18next": "^15.4.1",
    "sonner": "^2.0.2",
    "zod": "^3.24.2"
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -20,10 +20,10 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@tanstack/react-query": "5.69.2",
+    "@tanstack/react-query": "5.70.0",
    "next": "15.2.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
    "react-i18next": "^15.4.1"
  },
  "dependencies": {
--- a/packages/i18n/src/create-i18n-settings.ts
+++ b/packages/i18n/src/create-i18n-settings.ts
@@ -23,7 +23,6 @@ export function createI18nSettings({
    fallbackLng: languages[0],
    detection: undefined,
    lng,
-    load: 'languageOnly' as const,
    preload: false as const,
    lowerCaseLng: true as const,
    fallbackNS: ns,
--- a/packages/monitoring/api/package.json
+++ b/packages/monitoring/api/package.json
@@ -25,7 +25,7 @@
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@types/react": "19.0.12",
-    "react": "19.0.0",
+    "react": "19.1.0",
    "zod": "^3.24.2"
  },
  "typesVersions": {
--- a/packages/monitoring/baselime/package.json
+++ b/packages/monitoring/baselime/package.json
@@ -25,7 +25,7 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@types/react": "19.0.12",
-    "react": "19.0.0",
+    "react": "19.1.0",
    "zod": "^3.24.2"
  },
  "typesVersions": {
--- a/packages/monitoring/core/package.json
+++ b/packages/monitoring/core/package.json
@@ -18,7 +18,7 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@types/react": "19.0.12",
-    "react": "19.0.0"
+    "react": "19.1.0"
  },
  "typesVersions": {
    "*": {
--- a/packages/monitoring/sentry/package.json
+++ b/packages/monitoring/sentry/package.json
@@ -16,7 +16,7 @@
    "./config/server": "./src/sentry.client.server.ts"
  },
  "dependencies": {
-    "@sentry/nextjs": "^9.10.0",
+    "@sentry/nextjs": "^9.10.1",
    "import-in-the-middle": "1.13.1"
  },
  "devDependencies": {
@@ -25,7 +25,7 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@types/react": "19.0.12",
-    "react": "19.0.0"
+    "react": "19.1.0"
  },
  "typesVersions": {
    "*": {
--- a/packages/otp/package.json
+++ b/packages/otp/package.json
@@ -28,9 +28,9 @@
    "@supabase/supabase-js": "2.49.3",
    "@types/react": "19.0.12",
    "@types/react-dom": "19.0.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-hook-form": "^7.54.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.55.0",
    "zod": "^3.24.2"
  },
  "typesVersions": {
--- a/packages/shared/src/utils.ts
+++ b/packages/shared/src/utils.ts
@@ -14,7 +14,9 @@ export function formatCurrency(params: {
  locale: string;
  value: string | number;
 }) {
-  return new Intl.NumberFormat(params.locale, {
+  const [lang, region] = params.locale.split('-');
+
+  return new Intl.NumberFormat(region ?? lang, {
    style: 'currency',
    currency: params.currencyCode,
  }).format(Number(params.value));
--- a/packages/supabase/package.json
+++ b/packages/supabase/package.json
@@ -29,10 +29,10 @@
    "@kit/tsconfig": "workspace:*",
    "@supabase/ssr": "^0.6.1",
    "@supabase/supabase-js": "2.49.3",
-    "@tanstack/react-query": "5.69.2",
+    "@tanstack/react-query": "5.70.0",
    "@types/react": "19.0.12",
    "next": "15.2.4",
-    "react": "19.0.0",
+    "react": "19.1.0",
    "server-only": "^0.0.1",
    "zod": "^3.24.2"
  },
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -33,7 +33,7 @@
    "clsx": "^2.1.1",
    "cmdk": "1.1.1",
    "input-otp": "1.4.2",
-    "lucide-react": "^0.484.0",
+    "lucide-react": "^0.485.0",
    "react-top-loading-bar": "3.0.2",
    "recharts": "2.15.1",
    "tailwind-merge": "^3.0.2"
@@ -43,7 +43,7 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@radix-ui/react-icons": "^1.3.2",
-    "@tanstack/react-query": "5.69.2",
+    "@tanstack/react-query": "5.70.0",
    "@tanstack/react-table": "^8.21.2",
    "@types/react": "19.0.12",
    "@types/react-dom": "19.0.4",
@@ -54,7 +54,7 @@
    "next-themes": "0.4.6",
    "prettier": "^3.5.3",
    "react-day-picker": "^8.10.1",
-    "react-hook-form": "^7.54.2",
+    "react-hook-form": "^7.55.0",
    "react-i18next": "^15.4.1",
    "sonner": "^2.0.2",
    "tailwindcss": "4.0.17",