Onboarding modules: the frame stays, only the questions load
Gera, 2026-10-02: accurate ghosts, and a frame that does not blink between sections or modules.
2 Oct 2026 · branch feat/onboarding-module-frame-layout · captured against propflow-stage · at 233b3fa7c22
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 · Leasing › Fees & deposits, loading, desktop light
The status read is held open, so this is what a slow load shows. Everything static is already real: the title, the intro and flow strip, the section tabs, the section heading and Back/Next. The capture company is live, which the server already knows, so the read-only banner is drawn at once too. Only the questions are grey, one card per question this section asks. Before this PR the whole page was a wide seven-row form ghost. The next section is the same page loaded.
Asserted in the captured DOM — How Clara handles your leads · What Clara does here. · Fees & deposits · Next: Applying. The frame's words are checked on the loading page itself.
Sections 2–11 and notes
2 · Leasing › Fees & deposits, loaded, desktop light
Loaded: the five fee cards replace the five ghost cards. Nothing above them moved.
Asserted in the captured DOM — How Clara handles your leads · What Clara does here. · Fees & deposits · Next: Applying · Application fee
3 · Leasing › Fees & deposits, loading, desktop dark
Asserted in the captured DOM — How Clara handles your leads · What Clara does here. · Fees & deposits · Next: Applying
4 · Leasing › Fees & deposits, loaded, desktop dark
Asserted in the captured DOM — How Clara handles your leads · What Clara does here. · Fees & deposits · Next: Applying · Application fee
5 · Leasing › Fees & deposits, loading, phone light
Asserted in the captured DOM — How Clara handles your leads · What Clara does here. · Fees & deposits · Next: Applying
6 · Leasing › Fees & deposits, loaded, phone light
Asserted in the captured DOM — How Clara handles your leads · What Clara does here. · Fees & deposits · Next: Applying · Application fee
7 · Leasing › Fees & deposits, loading, phone dark
Asserted in the captured DOM — How Clara handles your leads · What Clara does here. · Fees & deposits · Next: Applying
8 · Leasing › Fees & deposits, loaded, phone dark
Asserted in the captured DOM — How Clara handles your leads · What Clara does here. · Fees & deposits · Next: Applying · Application fee
9 · Hours & contact, before the click
Start on Hours & contact, loaded. The next shot is taken right after clicking the Fees & deposits tab.
Asserted in the captured DOM — How Clara handles your leads · Hours & contact
10 · Right after clicking Fees & deposits
The title, intro, flow strip and tabs never left the screen. The tab moved to Fees & deposits, and the section heading changed with it. Only the area under the heading is loading.
Asserted in the captured DOM — How Clara handles your leads · Fees & deposits
11 · Leasing → Maintenance, right after the click
Moving to another module repaints the title, intro and tabs from the static menu at once. Only the questions wait.
Asserted in the captured DOM — Maintenance onboarding · Routing
How it is kept honest
The frame lives in settings/onboarding/(modules)/layout.tsx, which Next keeps mounted between module pages. Each section's loading.tsx draws only OnboardingSectionGhost, one card per question card. Each section's DOM test pins that count to the rendered section. onboarding-module-frame.dom.test.tsx pins three things: the frame is real while the read is in flight, the layout's fallback draws the same frame, and a module switch needs no second read.