Onboarding Overview: the loading ghost is the page's own shape
Gera, 2026-10-02: the ghost cards were very wide. Loading next to loaded, desktop and phone, light and dark.
2 Oct 2026 · branch feat/onboarding-loading-ghosts · captured against propflow-stage · at 5b9b958c962
Data note. Every name and balance below comes from propflow-stage, which is anonymized by construction (ADR-0097/0110 — phones in the impossible +1000 NPA, emails @example.test). The identical capture against prod would carry real tenants' names and balances and is not safe to attach anywhere, which is why the generator refuses to run against one.
1 · Overview, loading, desktop light
The reads the hub waits on are held open, so this is the loading state a slow connection shows. It now has the hub's shape: the ring and the four go-live steps, then a card per module. Before this PR it was one wide card with two grey bars. The capture account's company is already live, so the loaded page has no setup lines, and the ghost leaves them out too (it reads the same live flag the menu uses). The next section is the same page loaded.
Asserted in the captured DOM — Answer Clara’s questions · How Clara answers leads · Propflow turns Clara on. Static words render real; only the values are grey.
Sections 2–8 and notes
2 · Overview, loaded, desktop light
Loaded. Same hero frame, same three cards in the same grid. A parity test pins this for both a live and a pre-launch company.
Asserted in the captured DOM — Answer Clara’s questions · How Clara answers leads · Propflow turns Clara on
3 · Overview, loading, desktop dark
Asserted in the captured DOM — Answer Clara’s questions · How Clara answers leads · Propflow turns Clara on
4 · Overview, loaded, desktop dark
Asserted in the captured DOM — Answer Clara’s questions · How Clara answers leads · Propflow turns Clara on
5 · Overview, loading, phone light
Asserted in the captured DOM — Answer Clara’s questions · How Clara answers leads · Propflow turns Clara on
6 · Overview, loaded, phone light
Asserted in the captured DOM — Answer Clara’s questions · How Clara answers leads · Propflow turns Clara on
7 · Overview, loading, phone dark
Asserted in the captured DOM — Answer Clara’s questions · How Clara answers leads · Propflow turns Clara on
8 · Overview, loaded, phone dark
Asserted in the captured DOM — Answer Clara’s questions · How Clara answers leads · Propflow turns Clara on
How it is kept honest
One ghost (OnboardingHubGhost) covers all three loading windows: the route shell, the page's own sign-in read and the checklist card's two reads. It is built from the same frames as the loaded hero, module cards and setup lines. For a pre-launch company it adds the "Before Clara goes live" lines, one per checklist row plus Buildings when the menu shows it. onboarding-hub-ghost.parity.test.tsx renders both twins, live and pre-launch, and compares the hero frame, the module cards, the bars and the setup-line count.