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

apps/dev-tool/package.json

@@ -9,12 +9,12 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^4.1.3",
-    "@tanstack/react-query": "5.69.2",
-    "lucide-react": "^0.484.0",
+    "@tanstack/react-query": "5.70.0",
+    "lucide-react": "^0.485.0",
     "next": "15.2.4",
     "nodemailer": "^6.10.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
     "@kit/email-templates": "workspace:*",
@@ -29,7 +29,7 @@
     "@types/react-dom": "19.0.4",
     "babel-plugin-react-compiler": "19.0.0-beta-e1e972c-20250221",
     "pino-pretty": "^13.0.0",
-    "react-hook-form": "^7.54.2",
+    "react-hook-form": "^7.55.0",
     "tailwindcss": "4.0.17",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.8.2",

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -3,11 +3,11 @@
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 
-import type { User } from '@supabase/supabase-js';
+import { useQuery } from '@tanstack/react-query';
 
 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
-import { useUser } from '@kit/supabase/hooks/use-user';
+import { useSupabase } from '@kit/supabase/hooks/use-supabase';
 import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
@@ -29,30 +29,17 @@ const features = {
   enableThemeToggle: featuresFlagConfig.enableThemeToggle,
 };
 
-export function SiteHeaderAccountSection({
-  user,
-}: React.PropsWithChildren<{
-  user: User | null;
-}>) {
-  if (!user) {
-    return <AuthButtons />;
-  }
-
-  return <SuspendedPersonalAccountDropdown user={user} />;
-}
-
-function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
+export function SiteHeaderAccountSection() {
+  const session = useSession();
   const signOut = useSignOut();
-  const user = useUser(props.user);
-  const userData = user.data ?? props.user ?? null;
 
-  if (userData) {
+  if (session.data) {
     return (
       <PersonalAccountDropdown
         showProfileName={false}
         paths={paths}
         features={features}
-        user={userData}
+        user={session.data.user}
         signOutRequested={() => signOut.mutateAsync()}
       />
     );
@@ -63,7 +50,7 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 
 function AuthButtons() {
   return (
-    <div className={'flex gap-x-2.5'}>
+    <div className={'flex gap-x-2.5 animate-in fade-in duration-500'}>
       <div className={'hidden md:flex'}>
         <If condition={features.enableThemeToggle}>
           <ModeToggle />
@@ -86,3 +73,16 @@ function AuthButtons() {
     </div>
   );
 }
+
+function useSession() {
+  const client = useSupabase();
+
+  return useQuery({
+    queryKey: ['session'],
+    queryFn: async () => {
+      const { data } = await client.auth.getSession();
+
+      return data.session;
+    },
+  });
+}

apps/web/app/(marketing)/_components/site-header.tsx

@@ -1,5 +1,3 @@
-import type { User } from '@supabase/supabase-js';
-
 import { Header } from '@kit/ui/marketing';
 
 import { AppLogo } from '~/components/app-logo';
@@ -7,12 +5,12 @@ import { AppLogo } from '~/components/app-logo';
 import { SiteHeaderAccountSection } from './site-header-account-section';
 import { SiteNavigation } from './site-navigation';
 
-export function SiteHeader(props: { user?: User | null }) {
+export function SiteHeader() {
   return (
     <Header
       logo={<AppLogo />}
       navigation={<SiteNavigation />}
-      actions={<SiteHeaderAccountSection user={props.user ?? null} />}
+      actions={<SiteHeaderAccountSection />}
     />
   );
 }

apps/web/app/(marketing)/_components/site-navigation-item.tsx

@@ -29,7 +29,7 @@ export function SiteNavigationItem({
 
   return (
     <NavigationMenuItem key={path}>
-      <Link className={className} href={path}>
+      <Link className={className} href={path} as={path} prefetch={true}>
         {children}
       </Link>
     </NavigationMenuItem>

apps/web/app/(marketing)/layout.tsx

@@ -1,19 +1,11 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
-
 import { SiteFooter } from '~/(marketing)/_components/site-footer';
 import { SiteHeader } from '~/(marketing)/_components/site-header';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-async function SiteLayout(props: React.PropsWithChildren) {
-  const client = getSupabaseServerClient();
-
-  const {
-    data: { user },
-  } = await client.auth.getUser();
-
+function SiteLayout(props: React.PropsWithChildren) {
   return (
     <div className={'flex min-h-[100vh] flex-col'}>
-      <SiteHeader user={user} />
+      <SiteHeader />
 
       {props.children}
 
@@ -22,4 +14,4 @@ async function SiteLayout(props: React.PropsWithChildren) {
   );
 }
 
-export default withI18n(SiteLayout);
+export default withI18n(SiteLayout);

apps/web/app/auth/sign-in/page.tsx

@@ -58,7 +58,7 @@ async function SignInPage({ searchParams }: SignInPageProps) {
 
       <div className={'flex justify-center'}>
         <Button asChild variant={'link'} size={'sm'}>
-          <Link href={signUpPath}>
+          <Link href={signUpPath} prefetch={true}>
             <Trans i18nKey={'auth:doNotHaveAccountYet'} />
           </Link>
         </Button>

apps/web/app/auth/sign-up/page.tsx

@@ -57,7 +57,7 @@ async function SignUpPage({ searchParams }: Props) {
 
       <div className={'flex justify-center'}>
         <Button asChild variant={'link'} size={'sm'}>
-          <Link href={signInPath}>
+          <Link href={signInPath} prefetch={true}>
             <Trans i18nKey={'auth:alreadyHaveAnAccount'} />
           </Link>
         </Button>

apps/web/app/not-found.tsx

@@ -2,7 +2,6 @@ import Link from 'next/link';
 
 import { ArrowLeft } from 'lucide-react';
 
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
@@ -21,15 +20,9 @@ export const generateMetadata = async () => {
 };
 
 const NotFoundPage = async () => {
-  const client = getSupabaseServerClient();
-
-  const {
-    data: { user },
-  } = await client.auth.getUser();
-
   return (
     <div className={'flex h-screen flex-1 flex-col'}>
-      <SiteHeader user={user} />
+      <SiteHeader />
 
       <div
         className={

apps/web/components/analytics-provider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { usePathname, useSearchParams } from 'next/navigation';
 
@@ -71,7 +71,7 @@ function AnalyticsProviderBrowser(props: React.PropsWithChildren) {
   useAnalyticsMapping(analyticsMapping);
 
   // Report page views to the analytics service
-  useReportPageView((url) => analytics.trackPageView(url));
+  useReportPageView(useCallback((url) => analytics.trackPageView(url), []));
 
   // Render children
   return props.children;

apps/web/components/app-logo.tsx

@@ -40,7 +40,7 @@ export function AppLogo({
   }
 
   return (
-    <Link aria-label={label ?? 'Home Page'} href={href ?? '/'}>
+    <Link aria-label={label ?? 'Home Page'} href={href ?? '/'} prefetch={true}>
       <LogoImage className={className} />
     </Link>
   );

apps/web/package.json

@@ -55,16 +55,16 @@
     "@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",
     "@tanstack/react-table": "^8.21.2",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.484.0",
+    "lucide-react": "^0.485.0",
     "next": "15.2.4",
     "next-sitemap": "^4.2.3",
     "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",
     "recharts": "2.15.1",
     "sonner": "^2.0.2",

apps/web/public/locales/en/auth.json

@@ -69,6 +69,7 @@
   "termsOfService": "Terms of Service",
   "privacyPolicy": "Privacy Policy",
   "orContinueWith": "Or continue with",
+  "redirecting": "You're in! Please wait...",
   "errors": {
     "Invalid login credentials": "The credentials entered are invalid",
     "User already registered": "This credential is already in use. Please try with another one.",