[energy-only] revamp loading splash screen with animated checkmark steps

[divazbozz]

Goal

new splash screen design from Holland

What changed

EnergyOnlySplashModal.tsx

• Three steps tick off sequentially at t=1s, t=2s, t=3s — redirect fires on the last tick
• Custom CheckIcon component: filled green circle with checkmark (complete) vs grey outline circle (pending), using the provided design asset paths

styles.module.css

• New splash-specific classes: splashOverlay, splashCard, splashSpinner, splashSteps, splashStep, splashStepLabel, splashStepLabelComplete

Mobile jitter fix

When a step completes, the label switches from font-weight: 500 → 700. Bold text is wider, which would normally resize the container and shift the layout.

Fix: splashStepLabel::after renders an invisible bold ghost of the label text (height: 0; visibility: hidden; font-weight: 700; content: attr(data-label)). The element always occupies bold width, so the container never resizes when the state transitions — no layout shift.

Test

mobile.mov

desktop.web.mov

🤖 Generated with Claude Code

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include rabbit in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 070196f4-c511-4916-961f-03373e3c3649

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch david/geng-138-loading-screen-revamp

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}