Skip to content

perf: smooth route loading and navigation - #51

Merged
Programcode merged 28 commits into
mainfrom
t3code/smooth-performance
Sep 20, 2026
Merged

Programcode merged 28 commits into
mainfrom
t3code/smooth-performance

Conversation

@Programcode

@Programcode Programcode commented Sep 20, 2026 •

Copy link
Copy Markdown
Owner

Summary

  • keep the authenticated shell stable and replace generic route loading with localized route-shaped skeletons
  • retry failed lazy imports and prefetch route code on deliberate user intent while respecting Save-Data and slow connections
  • make announcement hydration user-scoped and resilient, and defer onboarding/Joyride without delaying its intended start
  • add repeatable navigation performance measurements and evidence

Scope

This PR ships the completed, reviewed performance work from plan tasks 1-10. Tasks 11-15 remain intentionally deferred for a later PR. It preserves the existing DebateLab UI and contains no database migrations, Edge Function changes, secrets, or production data changes relative to current main.

Verification

  • npm run docs:check
  • npm run lint
  • npm run typecheck
  • 1,126 unit tests with coverage
  • 186 Edge tests
  • production build
  • focused desktop/mobile onboarding timing regression test
  • full desktop/mobile Chromium E2E is running on the exact PR head

Expected user impact

  • route changes no longer replace the app with a generic full-page spinner
  • first-load route content gets a matching skeleton while code loads
  • likely next routes can load from cache after explicit intent
  • the initial app bundle drops roughly 32 KB gzip by moving onboarding/Joyride out of the entry chunk

Summary by CodeRabbit

  • New Features

    • Faster navigation with intent-based route preloading, including support for hover, focus, and touch interactions.
    • Added destination-specific loading skeletons with localized, accessible status messages.
    • Improved onboarding loading and startup timing.
    • Added reduced-motion-friendly navigation and loading behavior.
  • Bug Fixes

    • Announcements now remain stable during in-app navigation, respect availability dates, refresh appropriately, and reset safely when accounts change.
  • Documentation

    • Added performance guidance and navigation benchmarks covering accessibility, network conditions, and Core Web Vitals.

Copilot AI lite review requested due to automatic review settings September 20, 2026 14:27
@vercel

vercel Bot commented Sep 20, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
debate-navigator Ready Ready Preview Sep 20, 2026 2:47pm UTC

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@coderabbitai

coderabbitai Bot commented Sep 20, 2026 •

Copy link
Copy Markdown

Review Change StackReview Change Stack

Warning

Review limit reached

Next included review available in 53 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Free

Run ID: bca983f5-e3bd-4095-a62f-d95446a207ad

📥 Commits

Reviewing files that changed from the base of the PR and between 8f4cced and 779188f.

📒 Files selected for processing (9)
  • docs/performance/performance-playbook.md
  • docs/performance/smooth-navigation-baseline/README.md
  • e2e/navigation-performance.spec.ts
  • scripts/measure-navigation-performance.mjs
  • src/components/layout/AppLayout.tsx
  • src/components/loading/RouteSkeleton.tsx
  • src/test/components/AppLayout.test.tsx
  • src/test/performance-measurement-script.test.ts
  • src/test/route-skeleton.test.tsx
ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Free

Run ID: 8cb4ae92-86f2-439b-9ec0-46e5ce36b013

📥 Commits

Reviewing files that changed from the base of the PR and between 73e1d92 and 8f4cced.

⛔ Files ignored due to path filters (4)
  • docs/performance/smooth-navigation-baseline/desktop-delayed-filmstrip.png is excluded by !**/*.png
  • docs/performance/smooth-navigation-baseline/desktop-delayed.webm is excluded by !**/*.webm
  • docs/performance/smooth-navigation-baseline/pixel-5-delayed-filmstrip.png is excluded by !**/*.png
  • docs/performance/smooth-navigation-baseline/pixel-5-delayed.webm is excluded by !**/*.webm
📒 Files selected for processing (34)
  • docs/performance/performance-playbook.md
  • docs/performance/smooth-navigation-baseline/README.md
  • docs/performance/smooth-navigation-baseline/run-1.json
  • docs/performance/smooth-navigation-baseline/run-2.json
  • docs/performance/smooth-navigation-baseline/task-10-after-final.json
  • docs/performance/smooth-navigation-baseline/task-10-before.json
  • e2e/admin-announcements.spec.ts
  • e2e/animation-polish.spec.ts
  • e2e/home-navigation.spec.ts
  • e2e/navigation-performance.spec.ts
  • scripts/check-build-boundaries.mjs
  • scripts/measure-navigation-performance.mjs
  • src/App.tsx
  • src/components/NavLink.tsx
  • src/components/features/onboarding/OnboardingTour.tsx
  • src/components/landing/FinalCTA.tsx
  • src/components/landing/Hero.tsx
  • src/components/landing/Navbar.tsx
  • src/components/landing/Pricing.tsx
  • src/components/layout/AppLayout.tsx
  • src/components/loading/RouteSkeleton.tsx
  • src/hooks/use-route-prefetch.ts
  • src/index.css
  • src/lib/route-modules.ts
  • src/locales/en.json
  • src/locales/es.json
  • src/locales/hu.json
  • src/pages/HomePage.tsx
  • src/test/app-route-analytics-error-boundary.test.tsx
  • src/test/components/AppLayout.test.tsx
  • src/test/route-modules.test.ts
  • src/test/route-skeleton.test.tsx
  • src/test/use-route-prefetch.test.tsx
  • src/test/vercel-deployment-config.test.ts

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.


📝 Walkthrough

Walkthrough

Changes

Navigation performance

Layer / File(s) Summary
Performance playbook and baseline evidence
docs/performance/performance-playbook.md, docs/performance/smooth-navigation-baseline/*, scripts/measure-navigation-performance.mjs
Documents navigation decisions and records route, bundle, timing, layout, and delayed-loading measurements.
Lazy routes and accessible skeletons
src/App.tsx, src/lib/route-modules.ts, src/components/loading/RouteSkeleton.tsx, scripts/check-build-boundaries.mjs, src/locales/*, src/test/*, e2e/*
Adds cached route loaders, route-specific accessible skeletons, localized status messages, disabled route transitions, and build and E2E validation.
Intent-based route prefetching
src/hooks/use-route-prefetch.ts, src/components/NavLink.tsx, src/components/landing/*, src/pages/HomePage.tsx, src/components/layout/AppLayout.tsx, src/test/use-route-prefetch.test.tsx, e2e/navigation-performance.spec.ts
Adds hover, focus, pointer, and touch prefetching with route validation, deduplication, cancellation, and connection gating.
Onboarding and announcement lifecycle
src/components/features/onboarding/OnboardingTour.tsx, src/components/layout/AppLayout.tsx, src/test/components/AppLayout.test.tsx, e2e/home-navigation.spec.ts, e2e/admin-announcements.spec.ts
Loads onboarding conditionally and tracks its eligibility time. Announcement requests now use authenticated user state, expiry checks, caching, abort handling, dismissal handling, and stale-response protection.

Estimated code review effort: 5 (Critical) | ~90 minutes

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant L as Link
  participant P as Prefetch
  participant R as RouteLoaders
  participant A as App
  U->>L: Trigger route intent
  L->>P: Forward interaction
  P->>R: Preload route module
  U->>A: Activate destination
  A->>R: Reuse cached module
  R-->>A: Return route module
  A-->>U: Render destination
Loading

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Essentials by visiting https://app.coderabbit.ai/settings/billing.

Comment @coderabbitai help to get the list of available commands.

@Programcode

Copy link
Copy Markdown
Owner Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Sep 20, 2026 •

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@Programcode
Programcode merged commit 9127589 into main Sep 20, 2026
7 checks passed
@Programcode
Programcode deleted the t3code/smooth-performance branch September 20, 2026 14:59

This branch was successfully deployed

1 active deployment
Preview — 779188fc Deployed Sep 20, 2026 by vercel[bot]
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