feat(web): refresh account creation loading screen

apps/web/src/app/account-verification/page.tsx

@@ -2,11 +2,9 @@ import { redirect } from 'next/navigation';
 import { headers } from 'next/headers';
 import { Suspense } from 'react';
 import { StytchClient } from '@/components/auth/StytchClient';
-import { AnimatedLogo } from '@/components/AnimatedLogo';
-import BigLoader from '@/components/BigLoader';
+import { AccountCreationScreen } from '@/components/auth/AccountCreationScreen';
 import { getUserFromAuthOrRedirect } from '@/lib/user/server';
 import { getStytchStatus, handleSignupPromotion, type SignupSource } from '@/lib/stytch';
-import { PageContainer } from '@/components/layouts/PageContainer';
 import { isValidCallbackPath } from '@/lib/getSignInCallbackUrl';
 import { maybeInterceptWithSurvey } from '@/lib/survey-redirect';
 import { isOpenclawAdvisorCallback } from '@/lib/signup-source';
@@ -80,21 +78,13 @@ export default async function AccountVerificationPage({ searchParams }: AppPageP
   }
 
   return (
-    <PageContainer>
-      <div className="flex min-h-screen flex-col items-center justify-between gap-12">
-        <div className="self-start">
-          <AnimatedLogo />
-        </div>
-        {stytchStatus === null && (
-          <Suspense fallback={null}>
-            <StytchClient />
-          </Suspense>
-        )}
-        <BigLoader title="Creating Your Account" />
-        <div className="text-muted-foreground flex items-center justify-center text-xs">
-          © {new Date().getFullYear()} Kilo Code
-        </div>
-      </div>
-    </PageContainer>
+    <>
+      {stytchStatus === null && (
+        <Suspense fallback={null}>
+          <StytchClient />
+        </Suspense>
+      )}
+      <AccountCreationScreen />
+    </>
   );
 }

apps/web/src/components/AnimatedKiloLogo.tsx

@@ -1,7 +1,20 @@
 'use client';
 
-import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+import dynamic from 'next/dynamic';
+import { useReducedMotion } from 'motion/react';
+import KiloLogo from '@/components/KiloLogo';
+
+const DotLottieReact = dynamic(
+  () => import('@lottiefiles/dotlottie-react').then(module => module.DotLottieReact),
+  { ssr: false }
+);
 
 export default function AnimatedKiloLogo() {
+  const reduceMotion = useReducedMotion();
+
+  if (reduceMotion === true) {
+    return <KiloLogo />;
+  }
+
   return <DotLottieReact src="/lottie/YellowKiloLogo.lottie" loop autoplay />;
 }

apps/web/src/components/auth/AccountCreationScreen.module.css

@@ -0,0 +1,33 @@
+.shimmer {
+  font-size: 0.9375rem;
+  color: var(--muted-foreground);
+  background-image: linear-gradient(
+    100deg,
+    var(--foreground-subtle) 30%,
+    color-mix(in srgb, var(--foreground) 55%, var(--muted-foreground)) 50%,
+    var(--foreground-subtle) 70%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 3.2s linear infinite;
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 200% 50%;
+  }
+
+  to {
+    background-position: -200% 50%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+    animation: none;
+  }
+}

apps/web/src/components/auth/AccountCreationScreen.tsx

@@ -0,0 +1,18 @@
+import AnimatedKiloLogo from '@/components/AnimatedKiloLogo';
+import { PageContainer } from '@/components/layouts/PageContainer';
+import styles from './AccountCreationScreen.module.css';
+
+export function AccountCreationScreen() {
+  return (
+    <PageContainer className="min-h-screen">
+      <main className="flex flex-1 items-center justify-center">
+        <div className="flex flex-col items-center gap-4" role="status" aria-busy="true">
+          <span className="text-brand-primary size-12" aria-hidden="true">
+            <AnimatedKiloLogo />
+          </span>
+          <p className={`type-body ${styles.shimmer}`}>Creating your account</p>
+        </div>
+      </main>
+    </PageContainer>
+  );
+}

apps/web/src/tests/account-verification-redirect.test.ts

@@ -63,15 +63,8 @@ jest.mock('@/lib/credit-campaigns', () => ({
 jest.mock('@/components/auth/StytchClient', () => ({
   StytchClient: () => null,
 }));
-jest.mock('@/components/AnimatedLogo', () => ({
-  AnimatedLogo: () => null,
-}));
-jest.mock('@/components/BigLoader', () => ({
-  __esModule: true,
-  default: () => null,
-}));
-jest.mock('@/components/layouts/PageContainer', () => ({
-  PageContainer: ({ children }: { children: React.ReactNode }) => children,
+jest.mock('@/components/auth/AccountCreationScreen', () => ({
+  AccountCreationScreen: () => null,
 }));
 
 // isValidCallbackPath is NOT mocked — we use the real implementation