perf: deep performance optimizations across catalog, rendering, and build#597
Merged
Conversation
…uild GPU scroll performance: - Remove backdrop-blur-sm/md and semi-transparent gradients from all scrolling containers (VirtualizedProductGrid, ProductTableView, FiltersPage list/table views) — eliminates per-frame GPU blur on scroll - Add translateZ(0) + will-change:scroll-position to .scrollbar-products React rendering: - Move Intl.NumberFormat, formatPrice, and static lookup tables to module level in ProductCard (no re-creation per render) - Switch full Zustand store subscriptions to fine-grained selectors in ProductCard to prevent all-cards re-render on unrelated store changes - Remove unused useQueryClient hook call in ProductCard - Memoize colGapPx computation in VirtualizedProductGrid - Remove staggered framer-motion animations on virtual rows (triggered on every scroll virtualisation cycle) - Increase overscan: list 8→10, grid 3→5 Filter loop hot-path: - Pre-process all filter arrays to lowercase Sets/Arrays outside the per-product predicate (suppliers, publicoAlvo, datasComemorativas, endomarketing, ramosAtividade, segmentosAtividade, materiais, tags) — eliminates N×M toLowerCase() calls per filter pass - Switch suppliers.includes() O(n) → Set.has() O(1) - Stabilise resize listener with ref pattern (no re-register on column change) Data fetching: - Module-level singleton Promise for category map in useProductsLightweight — prevents N+1 category fetches across paginated loads - Add networkMode: offlineFirst to React Query for cache-first serving - Expand Vite optimizeDeps.include from 5 to 15 packages Build & routing: - Expand RoutePrefetcher with more routes and reduce secondary delay 2500ms → 1800ms - Add dns-prefetch for secondary Supabase host - Tune TooltipProvider delayDuration/skipDelayDuration https://claude.ai/code/session_011LmF185piJUGvBHb4cy5U4
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (12)
WalkthroughPR refatora infraestrutura de performance: otimiza styles removendo gradientes/blur, substitui animações por divs simples, implementa cache via singleton Promise, normaliza filtradores com lowercase, adiciona stratégia offline-first em queries e expande route prefetching. Sem quebras de API pública. ChangesPerformance, UX e Otimizações
🎯 3 (Moderate) | ⏱️ ~25 minutesPossibly Related PRs
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning Tools execution failed with the following error: Failed to run tools: 13 INTERNAL: Received RST_STREAM with code 2 (Internal server error) Comment |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR performs a broad performance pass across the product catalog experience and supporting infrastructure to improve scroll smoothness, reduce React re-renders, speed up filter evaluation, and make route/data prefetching more effective.
Changes:
- Removes GPU-expensive blur/gradient styling from major scroll containers and adds a shared
.scrollbar-productscompositor hint for smoother scrolling. - Optimizes catalog filtering and rendering hot paths (pre-lowercasing filter inputs, using
Setlookups, memoizing layout values, removing per-row motion animations, and using fine-grained Zustand selectors). - Improves prefetch/caching/build behavior (expanded
RoutePrefetchercoverage, React QuerynetworkMode: 'offlineFirst', and expanded ViteoptimizeDeps.include).
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Expands optimizeDeps.include to prebundle more frequently-used deps for faster dev startup/runtime. |
| src/routes/RoutePrefetcher.tsx | Prefetches additional likely-next routes and adjusts secondary prefetch timing/coverage. |
| src/pages/products/FiltersPage.tsx | Removes blur/gradient styling from list/table scroll containers. |
| src/pages/filters/useFiltersPageState.ts | Optimizes filter hot paths (preprocessing to lowercase/sets; ref-based resize handler). |
| src/lib/query-config.ts | Sets React Query default networkMode: 'offlineFirst' for better offline cache behavior. |
| src/index.css | Adds shared compositor hints to .scrollbar-products for scrolling performance. |
| src/hooks/products/useProductsLightweight.ts | Adds a module-level singleton promise to avoid repeated category-map fetches across pages. |
| src/components/products/VirtualizedProductGrid.tsx | Removes per-row staggered animations, memoizes column gap, increases overscan, and simplifies scroll container styling. |
| src/components/products/ProductTableView.tsx | Updates scroll container styling to remove blur/gradient and align with new scroll perf approach. |
| src/components/products/ProductCard.tsx | Hoists static helpers/constants and switches Zustand subscriptions to selector-based usage to reduce re-renders. |
| src/App.tsx | Tunes TooltipProvider delay props. |
| index.html | Adds DNS prefetch for an additional Supabase host. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+86
to
+92
| /* GPU-composited scroll containers — promotes to own layer to avoid repaints on scroll */ | ||
| @layer utilities { | ||
| .scrollbar-products { | ||
| transform: translateZ(0); | ||
| will-change: scroll-position; | ||
| } | ||
| } |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
2 issues found across 12 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="src/routes/RoutePrefetcher.tsx">
<violation number="1" location="src/routes/RoutePrefetcher.tsx:73">
P2: New fire-and-forget `import()` prefetches can raise unhandled promise rejections on chunk-load failures.</violation>
</file>
<file name="src/pages/filters/useFiltersPageState.ts">
<violation number="1" location="src/pages/filters/useFiltersPageState.ts:211">
P2: Responsive column clamp no longer re-applies when `gridColumns` changes, allowing >3 columns on small screens until a resize occurs.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| }, 2500); | ||
| if (pathname === '/produtos' || pathname === '/filtros') { | ||
| import('@/pages/mockups/MockupGenerator'); | ||
| import('@/pages/collections/CollectionsPage'); |
Contributor
There was a problem hiding this comment.
P2: New fire-and-forget import() prefetches can raise unhandled promise rejections on chunk-load failures.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/routes/RoutePrefetcher.tsx, line 73:
<comment>New fire-and-forget `import()` prefetches can raise unhandled promise rejections on chunk-load failures.</comment>
<file context>
@@ -47,25 +47,32 @@ export function RoutePrefetcher() {
- }, 2500);
+ if (pathname === '/produtos' || pathname === '/filtros') {
+ import('@/pages/mockups/MockupGenerator');
+ import('@/pages/collections/CollectionsPage');
+ }
+ }, 1800);
</file context>
Suggested change
| import('@/pages/collections/CollectionsPage'); | |
| import('@/pages/collections/CollectionsPage').catch(() => {}); |
| window.addEventListener('resize', handleResize, { passive: true }); | ||
| return () => window.removeEventListener('resize', handleResize); | ||
| }, [gridColumns]); | ||
| }, []); // empty deps — handler uses ref to avoid stale closure |
Contributor
There was a problem hiding this comment.
P2: Responsive column clamp no longer re-applies when gridColumns changes, allowing >3 columns on small screens until a resize occurs.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/pages/filters/useFiltersPageState.ts, line 211:
<comment>Responsive column clamp no longer re-applies when `gridColumns` changes, allowing >3 columns on small screens until a resize occurs.</comment>
<file context>
@@ -198,18 +198,17 @@ export function useFiltersPageState() {
+ window.addEventListener('resize', handleResize, { passive: true });
return () => window.removeEventListener('resize', handleResize);
- }, [gridColumns]);
+ }, []); // empty deps — handler uses ref to avoid stale closure
const [voiceOverlayOpen, setVoiceOverlayOpen] = useState(false);
const [commandAction, setCommandAction] = useState<string | null>(null);
</file context>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
backdrop-blurand semi-transparent gradients from all scrolling containers (VirtualizedProductGrid, ProductTableView, FiltersPage) — the single biggest win; eliminates per-frame GPU blur recalculation on every scroll event. AddtranslateZ(0)+will-change: scroll-positionto.scrollbar-products.Intl.NumberFormat,formatPrice, lookup tables) to module level in ProductCard; switch full Zustand store subscriptions to fine-grained selectors so unrelated store updates don't re-render all visible cards; remove unuseduseQueryClienthook call; memoizecolGapPx; remove staggered Framer Motion animations on virtual rows that were firing on every scroll virtualisation cycle; increase virtualizeroverscan.toLowerCase()calls per filter pass; switchArray.includes()O(n) →Set.has()O(1) for supplier ID lookups; stabilise resize listener with ref pattern.useProductsLightweightto prevent N+1 category fetches across paginated loads; addnetworkMode: offlineFirstto React Query for cache-first serving; expandoptimizeDeps.includefrom 5 to 15 packages.RoutePrefetcherwith reduced secondary delay (2500ms → 1800ms); DNS prefetch for secondary Supabase host; tune TooltipProvider delays.Test plan
/filtros) — scroll should feel noticeably smoother, especially on mid-range devicestsc --noEmit— zero new type errors introducedhttps://claude.ai/code/session_011LmF185piJUGvBHb4cy5U4
Generated by Claude Code
Summary by cubic
Deep performance pass across catalog and product pages to make scrolling smoother and filtering faster. Removes GPU-heavy effects, reduces re-renders, optimizes filter loops, and improves prefetch and offline behavior.
Refactors
backdrop-blurand gradient backgrounds from all scroll containers; addedtranslateZ(0)andwill-change: scroll-positionto.scrollbar-products.ProductCard: hoistedIntl.NumberFormatand lookup tables; switchedzustandsubscriptions to selectors; removed unuseduseQueryClient.framer-motionanimations, and increased@tanstack/react-virtualoverscan (list 10, grid 5).Set.has(); stable resize listener via ref.@tanstack/react-querynetworkMode: 'offlineFirst'; expandedRoutePrefetchercoverage and reduced secondary delay; added DNS prefetch; tunedTooltipProviderdelays; expanded ViteoptimizeDeps.include.Bug Fixes
ramosAtividadeandsegmentosAtividadefilters now use AND logic, yielding correct results.Written for commit 7e035fd. Summary will update on new commits.
Summary by CodeRabbit
Notas de Lançamento
New Features
Bug Fixes
Refactor
Chores