feat(web): refresh account creation loading screen

[Drixled]

Summary

Refreshes the account-creation loading screen with the continuously animated Kilo mark and a restrained shimmer status. The visual state is extracted from the authenticated account-verification route without changing the underlying Stytch or redirect flow.

What changed

• replace the legacy blue spinner and page chrome with the animated Kilo mark
• add a subtle shimmer treatment to the “Creating your account” status
• keep the loading presentation in one focused account-creation component
• make the shared animated logo own its browser-only Lottie boundary and static reduced-motion fallback

Visual Changes

Before	After

Scope

• visual loading-state changes only
• no changes to Stytch validation, telemetry, signup promotion, or redirect behavior
• no Storybook story or screenshot files are included in the final diff

Verification

• manually reviewed the account-creation loading state at desktop and mobile viewport sizes during development
• confirmed the Kilo logo animation loops continuously
• confirmed reduced-motion users receive a static logo and static status text
• confirmed the browser-only Lottie package is excluded from SSR

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

The incremental refactor moves the SSR-safe dynamic(..., { ssr: false }) boundary into the already-client AnimatedKiloLogo component and lets AccountCreationScreen revert to a Server Component, which correctly resolves the previously-flagged CRITICAL SSR issue (already confirmed fixed in the existing thread) via a cleaner architecture; no new issues found in the changed files.

Files Reviewed (5 files)

• apps/web/src/components/AnimatedKiloLogo.tsx - now owns the next/dynamic({ ssr: false }) boundary for the Lottie import and a reduced-motion static fallback; correctly valid since the file is 'use client'
• apps/web/src/components/auth/AccountCreationScreen.tsx - reverted to a Server Component; renders the client AnimatedKiloLogo directly, no SSR-safety regression
• apps/web/src/components/auth/AccountCreationScreen.module.css - pure rename from AccountCreationStatus.module.css, no content changes
• apps/web/src/components/auth/AccountCreationStatus.tsx - deleted, logic merged into AccountCreationScreen.tsx
• apps/web/src/tests/account-verification-redirect.test.ts - simplified mocks to mock AccountCreationScreen wholesale, consistent with page.tsx's actual imports

Previous Review Summaries (3 snapshots, latest commit bbbb688)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit bbbb688)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (3 files)

• apps/web/src/components/auth/AccountCreationScreen.tsx - previous CRITICAL SSR finding verified fixed: file now has 'use client' and dynamic(..., { ssr: false })
• docs/images/account-creation-after.png - deleted, no issues
• docs/images/account-creation-before.png - deleted, no issues

Previous review (commit 4dccdca)

Status: 1 Issue Found | Recommendation: Address before merge

Executive Summary

The AccountCreationScreen dynamically imports the Lottie-based status component from a Server Component without { ssr: false }, so it is still evaluated during SSR, contradicting the PR's stated goal and risking a production SSR crash on /account-verification.

Overview

Severity	Count
CRITICAL	1
WARNING	0
SUGGESTION	0

Issue Details (click to expand)

CRITICAL

File	Line	Issue
apps/web/src/components/auth/AccountCreationScreen.tsx	6	dynamic() defaults to ssr: true in this Server Component, so the browser-only Lottie chain is still evaluated during SSR

Files Reviewed (4 files)

• apps/web/src/app/account-verification/page.tsx - 0 issues
• apps/web/src/components/auth/AccountCreationScreen.tsx - 1 issue
• apps/web/src/components/auth/AccountCreationStatus.module.css - 0 issues
• apps/web/src/components/auth/AccountCreationStatus.tsx - 0 issues

Fix these issues in Kilo Cloud

Previous review (commit a76ea38)

Status: 1 Issue Found | Recommendation: Address before merge

Executive Summary

The new AccountCreationScreen dynamically imports the Lottie-based status component from a Server Component without { ssr: false }, so it is still evaluated during SSR, contradicting the PR's stated goal and risking a production SSR crash on /account-verification.

Overview

Severity	Count
CRITICAL	1
WARNING	0
SUGGESTION	0

Issue Details (click to expand)

CRITICAL

File	Line	Issue
apps/web/src/components/auth/AccountCreationScreen.tsx	6	dynamic() defaults to ssr: true in this Server Component, so the browser-only Lottie chain is still evaluated during SSR

Files Reviewed (5 files)

• apps/storybook/stories/AccountCreationScreen.stories.tsx - 0 issues
• apps/web/src/app/account-verification/page.tsx - 0 issues
• apps/web/src/components/auth/AccountCreationScreen.tsx - 1 issue
• apps/web/src/components/auth/AccountCreationStatus.module.css - 0 issues
• apps/web/src/components/auth/AccountCreationStatus.tsx - 0 issues

Fix these issues in Kilo Cloud

---

_{Reviewed by claude-sonnet-5-20260630 · Input: 28 · Output: 8.7K · Cached: 708.1K}

_{Review guidance: REVIEW.md from base branch main}