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/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={