perf: lazy load heavy first-screen dependencies

[boojack]

Summary

• Lazy-load Home, map UI, profile map, and Mermaid so auth/signup first render does not preload memo/map/diagram dependencies.
• Move Leaflet and KaTeX CSS out of the app entry and into feature-loaded paths.
• Replace editor-facing Leaflet LatLng state with plain MapPoint coordinates to keep parent chunks Leaflet-free.

Test Plan

• cd web && pnpm lint && pnpm build
• cd web && pnpm test (14 files, 75 tests)
• Production preview browser check on /auth/signup: no Mermaid/Leaflet/KaTeX asset tags
• rg -n "mermaid|leaflet|katex" web/dist/index.html returns no matches

Note: Live authenticated memo/map smoke tests were not run because the preview did not have a backend session or seeded memo data.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR optimizes first-screen load performance for the /auth/signup route by removing eager imports of heavy optional dependencies (Mermaid, Leaflet, KaTeX). The changes introduce a MapPoint coordinate type, lazy-load map and profile components behind Suspense boundaries, convert Mermaid and KaTeX to dynamic/deferred loading, and adjust build configuration to prevent these features from entering the auth entry chunk.

Changes

First-Screen Performance Optimization

Layer / File(s)	Summary
MapPoint coordinate abstraction web/src/components/map/types.ts	New MapPoint interface replaces Leaflet LatLng as the app's internal coordinate representation.
Editor location state and MapPoint adoption web/src/components/MemoEditor/types/insert-menu.ts, web/src/components/MemoEditor/hooks/useLocation.ts, web/src/components/MemoEditor/Toolbar/InsertMenu.tsx	Editor hooks, state types, and toolbar components updated to use plain MapPoint coordinate objects instead of constructing Leaflet LatLng instances.
LocationPicker modernization with coordinate conversion web/src/components/map/LocationPicker.tsx, web/src/components/map/index.ts	LocationPicker introduces toLatLng/fromLatLng helpers; now accepts and emits MapPoint for position data while maintaining internal Leaflet usage. Control components updated to accept MapPoint. Barrel exports narrowed to prevent unintended eager imports.
LazyLocationPicker Suspense wrapper web/src/components/map/LazyLocationPicker.tsx	New component lazy-loads LocationPicker via React.lazy with Suspense boundary and styled placeholder, enabling map UI to load only when opened.
Location dialog and display view lazy rendering web/src/components/MemoMetadata/Location/LocationDialog.tsx, web/src/components/MemoMetadata/Location/LocationDisplayView.tsx	Dialog and view components conditionally render LazyLocationPicker only when their UI is active, replacing eager imports; callbacks updated to use MapPoint.
UserProfile map lazy-loading and Leaflet CSS localization web/src/pages/UserProfile.tsx, web/src/components/UserMemoMap/UserMemoMap.tsx	UserProfile lazy-loads UserMemoMap with Suspense fallback; Leaflet stylesheet imported into UserMemoMap so CSS loads only when map renders.
Dynamic Mermaid import and deferred KaTeX styling web/src/components/MemoContent/MermaidBlock.tsx, web/src/components/MemoContent/MemoMarkdownRenderer.tsx	MermaidBlock converts to dynamic import("mermaid") at render effect time with async rendering and cancellation guards; MemoMarkdownRenderer imports KaTeX CSS where it is used rather than globally.
Entry point cleanup and routing lazy-loading web/src/main.tsx, web/src/router/index.tsx, web/vite.config.mts	Leaflet and KaTeX CSS removed from main.tsx. Router converts Home page to lazy-loaded via lazyWithReload. Vite config narrows leaflet-vendor chunk rule to isolate Leaflet separately from React-Leaflet.
Implementation plan and design specification docs/superpowers/plans/2026-05-12-first-screen-lazy-heavy-deps.md, docs/superpowers/specs/2026-05-12-first-screen-lazy-heavy-deps-design.md	Task-by-task plan with verification steps and checklist; design spec covering architecture, data flow, error handling, and testing expectations.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main objective: lazy loading heavy first-screen dependencies to optimize performance.
Description check	✅ Passed	The description is directly related to the changeset, explaining the lazy-loading approach, CSS relocation, and coordinate type replacement.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

docs/superpowers/plans/2026-05-12-first-screen-lazy-heavy-deps.md (1)

714-729: Please complete and attach results for the live smoke checks before merge.

Static build verification is good, but these lazy boundaries still need runtime validation in an authenticated/seeded environment (Mermaid render, KaTeX styling, location picker/popover, profile map tab).

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/superpowers/plans/2026-05-12-first-screen-lazy-heavy-deps.md` around
lines 714 - 729, Finish the live smoke tests described in "Step 5: Smoke test
feature lazy loading" by running the app in an authenticated, seeded environment
and verifying each item: confirm Mermaid diagrams lazy-load and render when a
memo with a Mermaid code block appears, confirm KaTeX styling loads for
inline/block math, verify the location picker loads Leaflet assets and remains
interactive, verify memo location popovers load Leaflet and show pinned maps,
and verify `/u/:username?view=map` loads the profile map with marker clustering;
capture screenshots, short reproduction steps, and any console/network logs
showing the lazy chunk requests and attach those results to this PR before
merging.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/src/components/map/LocationPicker.tsx`:
- Around line 214-217: The derived LatLng objects created by calling
toLatLng(...) each render cause the initialPosition effect to think coordinates
changed and call map.setView; in LocationPicker replace the direct calls to
toLatLng for mapCenter and markerPosition with memoized values (useMemo) that
only recompute when the underlying numeric coordinates change (e.g., depend on
latlng?.lat and latlng?.lng or the DEFAULT_CENTER coords), and use that memoized
mapCenter in the initialPosition effect so map.setView is only invoked when
coordinates truly change.

In `@web/src/components/MemoContent/MermaidBlock.tsx`:
- Around line 41-43: The effect in MermaidBlock's useEffect exits early when
codeContent is falsy and thus leaves previously rendered SVG/error visible;
update the effect to explicitly reset the component state when codeContent is
empty by clearing any rendered output and errors (e.g., call the state setters
used for the rendered SVG and error inside the early-return branch), ensuring
the hook (useEffect in MermaidBlock.tsx) resets the diagram state whenever
codeContent becomes empty.

---

Nitpick comments:
In `@docs/superpowers/plans/2026-05-12-first-screen-lazy-heavy-deps.md`:
- Around line 714-729: Finish the live smoke tests described in "Step 5: Smoke
test feature lazy loading" by running the app in an authenticated, seeded
environment and verifying each item: confirm Mermaid diagrams lazy-load and
render when a memo with a Mermaid code block appears, confirm KaTeX styling
loads for inline/block math, verify the location picker loads Leaflet assets and
remains interactive, verify memo location popovers load Leaflet and show pinned
maps, and verify `/u/:username?view=map` loads the profile map with marker
clustering; capture screenshots, short reproduction steps, and any
console/network logs showing the lazy chunk requests and attach those results to
this PR before merging.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 96ddb5b9-019d-44d6-b90f-ec198dedee44

📥 Commits

Reviewing files that changed from the base of the PR and between 7f1f53f and ead1f06.

📒 Files selected for processing (18)

• docs/superpowers/plans/2026-05-12-first-screen-lazy-heavy-deps.md
• docs/superpowers/specs/2026-05-12-first-screen-lazy-heavy-deps-design.md
• web/src/components/MemoContent/MemoMarkdownRenderer.tsx
• web/src/components/MemoContent/MermaidBlock.tsx
• web/src/components/MemoEditor/Toolbar/InsertMenu.tsx
• web/src/components/MemoEditor/hooks/useLocation.ts
• web/src/components/MemoEditor/types/insert-menu.ts
• web/src/components/MemoMetadata/Location/LocationDialog.tsx
• web/src/components/MemoMetadata/Location/LocationDisplayView.tsx
• web/src/components/UserMemoMap/UserMemoMap.tsx
• web/src/components/map/LazyLocationPicker.tsx
• web/src/components/map/LocationPicker.tsx
• web/src/components/map/index.ts
• web/src/components/map/types.ts
• web/src/main.tsx
• web/src/pages/UserProfile.tsx
• web/src/router/index.tsx
• web/vite.config.mts

💤 Files with no reviewable changes (2)

• web/src/components/map/index.ts
• web/src/main.tsx

[coderabbitai]

🧹 Nitpick comments (1)

web/tests/location-picker.test.tsx (1)

6-12: ⚡ Quick win

Reset shared mocks between tests to avoid call-count leakage.

These spies are module-scoped and will retain call history across future tests in this file unless explicitly reset.

Suggested change

 import { render } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import LocationPicker from "@/components/map/LocationPicker";
@@
 const eventMap = { setView, locate };
 const controlMap = { zoomIn, zoomOut };
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/tests/location-picker.test.tsx` around lines 6 - 12, Module-scoped spies
(setView, locate, zoomIn, zoomOut) leak call counts across tests; fix by
resetting or recreating them between tests—either move creation of
eventMap/controlMap and their vi.fn() mocks into a beforeEach so each test gets
fresh mocks, or add a beforeEach/afterEach that calls vi.clearAllMocks() or
vi.resetAllMocks() to clear call history for setView, locate, zoomIn, zoomOut
(and any other module-scoped mocks) before each test run.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@web/tests/location-picker.test.tsx`:
- Around line 6-12: Module-scoped spies (setView, locate, zoomIn, zoomOut) leak
call counts across tests; fix by resetting or recreating them between
tests—either move creation of eventMap/controlMap and their vi.fn() mocks into a
beforeEach so each test gets fresh mocks, or add a beforeEach/afterEach that
calls vi.clearAllMocks() or vi.resetAllMocks() to clear call history for
setView, locate, zoomIn, zoomOut (and any other module-scoped mocks) before each
test run.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d7bd1d21-7283-4f2a-874d-15471bbc23fa

📥 Commits

Reviewing files that changed from the base of the PR and between ead1f06 and 54eb553.

📒 Files selected for processing (4)

• web/src/components/MemoContent/MermaidBlock.tsx
• web/src/components/map/LocationPicker.tsx
• web/tests/location-picker.test.tsx
• web/tests/mermaid-block.test.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• web/src/components/MemoContent/MermaidBlock.tsx
• web/src/components/map/LocationPicker.tsx