Skip to content

perf: Optimize core performance metrics across frontend#182

Merged
therealjhay merged 2 commits into
Betta-Pay:mainfrom
girly-coder01:perf/optimize-performance-metrics
Jun 30, 2026
Merged

perf: Optimize core performance metrics across frontend#182
therealjhay merged 2 commits into
Betta-Pay:mainfrom
girly-coder01:perf/optimize-performance-metrics

Conversation

@girly-coder01

@girly-coder01 girly-coder01 commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Summary

Implemented four critical performance optimizations to improve Core Web Vitals and user experience:

#43 - Font Display Optimization

  • Added explicit `display: 'swap'` to Inter font configuration in app/layout.tsx
  • Ensures text remains visible during web font load (prevents FOIT)
  • Improves LCP (Largest Contentful Paint) metric

#45 - Route Prefetching

  • Added `useEffect` hook with `router.prefetch()` calls in app/(merchant)/layout.tsx
  • Prefetches most commonly accessed routes (/transactions, /payments)
  • Reduces navigation latency for frequent user journeys

#46 - Virtual Scrolling for Transactions Table

  • Integrated `@tanstack/react-virtual` in app/(merchant)/transactions/page.tsx
  • Fixed height container (600px) with overflow scroll
  • Renders only ~15-20 visible rows instead of entire dataset
  • Maintains proper HTML table semantics
  • Preserves full search and filter functionality on complete dataset

#44 - Icon Tree-Shaking Verification

  • Audited all lucide-react imports - confirmed named-import pattern
  • Added `@next/bundle-analyzer` as dev dependency
  • Configured in next.config.js for production bundle verification

Closes #43, Closes #44, Closes #45, Closes #46

girly-coder01 and others added 2 commits June 30, 2026 07:44
Implemented four critical performance optimizations to improve Core Web Vitals:

1. Font Display Optimization (Betta-Pay#43): Added explicit display: 'swap' to Inter
   font configuration to ensure text remains visible during webfont load,
   preventing FOIT and improving LCP metrics.

2. Route Prefetching (Betta-Pay#45): Added strategic router.prefetch() calls in
   merchant layout for commonly accessed routes (transactions, payments)
   to reduce navigation latency for frequent user journeys.

3. Virtual Scrolling for Transactions Table (Betta-Pay#46): Integrated @tanstack/react-virtual
   to render only visible table rows. Fixed height container (600px) with overflow
   scroll ensures smooth scrolling with 1000+ rows while reducing DOM nodes from
   thousands to ~15-20 visible at any time. Maintains proper table semantics.

4. Icon Tree-Shaking Verification (Betta-Pay#44): Audited all lucide-react imports
   to confirm named-import pattern (no wildcard imports). Added @next/bundle-analyzer
   for production bundle verification that only used icons are included.

All changes maintain existing functionality and preserve search/filter on
full dataset. Changes follow project code patterns and pass linting checks.

Closes Betta-Pay#43, Betta-Pay#44, Betta-Pay#45, Betta-Pay#46

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 30, 2026

Copy link
Copy Markdown

@girly-coder01 is attempting to deploy a commit to the therealjhay's projects Team on Vercel.

A member of the Team first needs to authorize it.

@therealjhay therealjhay merged commit 48b80ae into Betta-Pay:main Jun 30, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants