Skip to content

fix(perf): resolve slow navigation lag by introducing signed session cookies and deferred query streamingFix/navigation performance#134

Open
priymavani wants to merge 3 commits into
rushikesh-bobade:mainfrom
priymavani:fix/navigation-performance
Open

fix(perf): resolve slow navigation lag by introducing signed session cookies and deferred query streamingFix/navigation performance#134
priymavani wants to merge 3 commits into
rushikesh-bobade:mainfrom
priymavani:fix/navigation-performance

Conversation

@priymavani

@priymavani priymavani commented Jul 7, 2026

Copy link
Copy Markdown

Description

This PR resolves the page navigation freeze when switching between authenticated sections (Dashboard, Inventory, Market Prices, Sales Log, Expenses, AI Insights, Settings, Income Statement, and Price Alerts).

What was causing the lag?

  1. Network-Based Auth Calls: Every route loader performed a blocking await supabase.auth.getUser() network query to verify the session. Since React Router resolves transitions concurrently, parallel checks blocked navigation.
  2. Synchronous DB Fetches: Loader executions awaited heavy Prisma DB queries before returning, preventing route changes until the data fetched.

Solutions Implemented:

  1. Signed Session Cookies (__ft_auth_session):

    • Implemented standard server-side signed cookie sessions using createCookieSessionStorage signed with the project's ENCRYPTION_SECRET.
    • On transition, authentication is verified locally in <1ms (zero network calls). Remote Supabase Auth is only called as a fallback.
    • Added in-flight promise caching to share concurrent queries and an in-memory cache with a 5-minute TTL.
  2. Layout Opt-Out Revalidation:

    • Configured shouldRevalidate: () => false on the parent layout (app-layout.tsx) to avoid repeat auth checks on sibling navigations.
  3. Data Deferral & Streaming (React Router v7 defer API):

    • Converted blocking Prisma DB queries into deferred promises across all loaders.
    • Wrapped page components in <Suspense> and <Await> to instantly mount page frames (<100ms) while data details stream asynchronously.
    • Added rotating loading indicator animations using @tabler/icons-react on all pages.

Security Best Practices Adhered To:

  • No hardcoded secrets: Secrets use environment variables via process.env.
  • Prisma Parameterized Queries: Database calls use standard Prisma methods (findUnique, findMany, etc.), avoiding raw SQL string interpolation.
  • Authorized Data Access: All lookups are strictly bound to user ownership (where: { userId: user.id }).

Related Issues

This PR fixes an open issue #128

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

🎥 Verification Recording:

navigation_fix.mp4

@vercel

vercel Bot commented Jul 7, 2026

Copy link
Copy Markdown

@priymavani is attempting to deploy a commit to the participationcorner2025-8967's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added the ECSoC26 Required label for ECSOC Sentinel scoring label Jul 7, 2026
@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

Codesense Ai: This PR is too large to review automatically. A human maintainer will take a look!

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

Labels

ECSoC26 Required label for ECSOC Sentinel scoring

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant