Appearance
ADR 0036 — Animated Tree of Life Loading Screen ​
Status: Accepted
Date: 2026-06-23
Author: Kristopher Turner
ADO: AB#3711
Context ​
The web app requires ~1 second for Clerk to initialize before the sign-in form can render. During this time the app must show a loading state. Additionally, the app gate in ProtectedApp shows a loading state while the platform session is fetched post-sign-in.
A plain spinner (rotating circle) was originally used. The loading moment is the very first thing a user sees when they open the app — it is a branding opportunity.
The LandingPage component (sign in / request access buttons) has been eliminated from the sign-in flow (ADR 0031 — web app first page is the sign-in screen). The landing page HTML mockups in Claude Design are archived.
Decision ​
Replace all spinner loading states with an animated Tree of Life loading screen (TreeLoader component at apps/web/src/components/TreeLoader.tsx).
Animation sequence (~1.0s total):
| Element | Starts | Duration | Easing |
|---|---|---|---|
| Trunk + roots grow up | 0.05s | 0.38s | cubic-bezier spring |
| Center canopy scale in | 0.17s | 0.48s | cubic-bezier spring |
| Left canopy scale in | 0.27s | 0.42s | cubic-bezier spring |
| Right canopy scale in | 0.37s | 0.42s | cubic-bezier spring |
| Canopy highlights | 0.42s | 0.38s | cubic-bezier spring |
| Gold fruit dots pop | 0.67–0.77s | 0.28s | ease-out |
| Wordmark fade up | 0.72s | 0.45s | ease-out |
Design: Blue circle (#2C5AA0) with gold ring (#D4AF37), green canopy (#4A7C59 / #5A9168), gold fruit dots and trunk. "Heritage Virginia / COMMUNITY HUB" wordmark below in brand type. Matches the Tree of Life icon used on the sign-in page.
Consequences ​
- Every loading state in the app now shows the animated tree — consistent brand experience
TreeLoaderused in three places:RootRoute(Clerk init at/),SignInPage(Clerk init at/sign-in),ProtectedApp(platform session load)LandingPage.tsxdeleted — landing page flow removed;/redirects directly to/sign-in- Landing page mockups (landing-desktop, landing-tablet, landing-phone) archived from Claude Design
- Animation uses CSS
@keyframesinline in the component — no animation library dependency
Alternatives Considered ​
- Plain CSS spinner: Simple but misses a branding moment at the most prominent user-visible moment.
- Skeleton screen: Not applicable — nothing to skeleton before Clerk loads.
- Lottie animation: Adds ~100KB dependency; CSS achieves the same effect with zero overhead.