Skip to content

Fix calculator navigation flash with persistent layout#925

Open
SakshiKekre wants to merge 7 commits intomainfrom
fix/calculator-nav-flash-portal
Open

Fix calculator navigation flash with persistent layout#925
SakshiKekre wants to merge 7 commits intomainfrom
fix/calculator-nav-flash-portal

Conversation

@SakshiKekre
Copy link
Copy Markdown
Collaborator

@SakshiKekre SakshiKekre commented Apr 7, 2026

Context

Navigating between calculator pages (reports, policies, simulations, households) caused a visible white flash because each page mounted its own StandardLayout and CalculatorProviders. Next.js unmounted the entire component tree on every navigation, destroying and rebuilding the sidebar/header DOM.

This was tested across 4 approaches on Vercel preview deployments with a perf instrumentation harness (PRs #915-#918). See #917 for detailed benchmarks and comparison data.

Summary

Navigation flash fix

  • Move StandardLayout + CalculatorProviders into [countryId]/layout.tsx so they persist across all page navigations
  • Add FullScreenPortal component — the parameter selector renders as a fixed full-screen overlay via React portal, covering the sidebar/header naturally
  • Pathway wrappers no longer conditionally wrap/unwrap StandardLayout — full-screen views use <FullScreenPortal> instead
  • Strip CalculatorProviders and StandardLayout from all individual page files

API error handling fix

  • Wrap SocietyWideCalcStrategy.execute() in try/catch — returns error CalcStatus instead of throwing (matches HouseholdCalcStrategy pattern). Previously, a 500 from the Modal gateway would propagate as an uncaught async error and corrupt the Next.js router state, freezing all internal navigation.
  • Remove throw error from CalcOrchestratorManager.startCalculation() catch block — logs and cleans up without re-throwing
  • Update test to match new behavior (error is swallowed, not re-thrown)

Perf results (from #917 preview testing)

  • Listing↔listing (cached): 3-6ms (previously 820-1400ms with remounts)
  • Listing→create (first load): 874-1488ms (chunk download, same as before)
  • Param selector enter/exit: instant mode change, no mount/unmount
  • Sidebar/StandardLayout/CalculatorProviders: mount once at page load, never unmount

Test plan

  • Navigate between listing pages (reports, simulations, policies, households) — no white flash
  • Navigate listing → create pathway — sidebar stays, content swaps
  • policies/create → parameter selector — full-screen overlay, no double header
  • Back from parameter selector — sidebar reappears instantly
  • Same flow for simulations/create → parameter selector
  • Report builder and report output pages render correctly
  • Trigger a report with a failing API — sidebar nav should remain functional

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 7, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
policyengine-app-v2 Ready Ready Preview, Comment Apr 15, 2026 6:55pm
policyengine-calculator Ready Ready Preview, Comment Apr 15, 2026 6:55pm
policyengine-calculator-next Ready Ready Preview, Comment Apr 15, 2026 6:55pm
policyengine-website Ready Ready Preview, Comment Apr 15, 2026 6:55pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants