Lazy load merch nav products

[tannerlinsley]

Summary

• lazy-load merch dropdown products only after the merch menu is interacted with
• prevents hidden CSS-rendered merch panels from fetching Shopify products on unrelated pages

Tests

• CI=true pnpm test:tsc
• pnpm run test via pre-commit

Summary by CodeRabbit

• Performance
  • Optimized the merch mega-menu to load products only when users interact with it, reducing initial load time.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 299ac54d-49ba-43cd-987b-adf7452a98a5

📥 Commits

Reviewing files that changed from the base of the PR and between 3cb4b5b and 10c2588.

📒 Files selected for processing (1)

• src/components/Navbar.tsx

---

📝 Walkthrough

Walkthrough

MerchMenuContent in Navbar.tsx is updated to defer getProducts calls until first user interaction. A rootRef and shouldLoad state are added; an effect attaches pointerenter/focusin listeners to set shouldLoad, and the skeleton UI is now gated on shouldLoad && loading.

Changes

Merch Mega-Menu Lazy Load Trigger

Layer / File(s)	Summary
shouldLoad state, interaction listeners, and gated skeleton render src/components/Navbar.tsx	Introduces rootRef and shouldLoad state. A new effect attaches pointerenter/focusin listeners to the desktop .ts-mega-trigger-wrap or mobile menu root, setting shouldLoad on first interaction. The root <div> receives ref={rootRef}, the effect re-runs on variant change, and the skeleton/loading UI is rendered only when shouldLoad && loading.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• TanStack/tanstack.com#985: Directly modifies the same MerchMenuContent component in src/components/Navbar.tsx, changing product fetching and loading state rendering that this PR further refines with the deferred load mechanism.

Poem

🐇 Hop, hop — no fetch until you knock!
I wait by the door, watching the clock.
A pointer enters, a focus rings true,
Only then do the products come into view.
Lazy by nature, swift when you call —
The merch menu blooms, delighting all! 🛍️

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Lazy load merch nav products' clearly and concisely summarizes the main change: implementing lazy loading for merch navigation products to defer product fetching until user interaction.
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.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch taren/nav-merch-dropdown

---

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