Sign-in Loading Animation — Design Reference

Status: Implemented
ADR: 0036
Component: apps/web/src/components/TreeLoader.tsx
Date: 2026-06-23

---

What it replaces

• Plain CSS spinner (rotating border div)
• LandingPage component (deleted — no longer part of the sign-in flow)

---

When it appears

Context	Component	Trigger
Navigating to /	RootRoute	useUser().isLoaded === false
Navigating to /sign-in	SignInPage	useAuth().isLoaded === false
After sign-in, loading platform session	ProtectedApp	useAuth().isLoaded === false OR usePlatformSession().loading

Duration: approximately 0.8–1.2 seconds (Clerk SDK initialization time).

---

Visual design

Full viewport, colors.background (Quiet Mist Gray #F5F5F0).

Centered SVG — 96×96px, viewBox 6 6 108 110 (the Tree of Life icon):

Layer	Color	Notes
Background circle	#2C5AA0 Heritage Blue	r=54
Gold ring	#D4AF37 Harvest Gold	stroke, r=52, 2.5px
Trunk + roots	#D4AF37 Harvest Gold	rect + 3 paths
Canopy circles (3)	#4A7C59 Deep Green	r=16/16/23
Highlight clusters (2)	#5A9168 lighter	opacity 0.5–0.6
Fruit dots (3)	#D4AF37 Harvest Gold	r=3, opacity 0.8–0.9

Wordmark below the SVG (gap = spacing.lg):

• Line 1: "Heritage Virginia" — 700 weight, 1.125rem, colors.primary
• Line 2: "Community Hub" — 0.6875rem, colors.textSecondary, letter-spacing: 0.14em, uppercase

---

Animation timing

All keyframes are prefixed hch- to avoid collisions with third-party CSS.

hch-trunk     scaleY 0→1, opacity 0→1   spring easing
hch-canopy    scale 0.55→1, opacity 0→1 spring easing  
hch-fruit     scale 0→1.35→1, pop       ease-out
hch-fade-up   translateY 10→0, fade      ease-out

Growth sequence (staggered): trunk first → center canopy → left → right → highlights → fruit dots → wordmark.

Total perceived animation: ~1.0 seconds. Designed to complete at the same moment Clerk finishes initializing, so the transition to the sign-in form feels instant.

---

Files

File	Role
apps/web/src/components/TreeLoader.tsx	Component (do not modify without updating this doc)
apps/web/public/heritage-virginia-logo.svg	Horizontal lockup used on the sign-in page (not the loader)
apps/web/src/App.tsx	Renders <TreeLoader /> in RootRoute, SignInPage, ProtectedApp

---

Archived

• LandingPage.tsx — deleted 2026-06-23. Was at apps/web/src/pages/LandingPage.tsx. Showed sign-in + request-access buttons; replaced by direct /sign-in redirect.
• Claude Design cards: landing-desktop, landing-tablet, landing-phone — archived (no longer reflect the intended flow).