From 83de7df089cf9398d25627c6e239aae217d78cf9 Mon Sep 17 00:00:00 2001 From: Marco Date: Sat, 1 Aug 2026 08:33:51 +0000 Subject: [PATCH] Fix shop grid going blank after applying a filter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Same RevealGroup stuck-at-opacity-0 bug as the blog's category filter (see f95feaf) — whileInView only fires once per component instance, and a price/category/inStock filter change re-renders the same /shop page in place, so RevealGroup never naturally remounts between filter states. Keying it on the actual filtered product set forces a remount, restarting the viewport tracking each time. --- app/shop/components/ProductGrid.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/app/shop/components/ProductGrid.tsx b/app/shop/components/ProductGrid.tsx index 4844ce0..1aef969 100644 --- a/app/shop/components/ProductGrid.tsx +++ b/app/shop/components/ProductGrid.tsx @@ -111,7 +111,19 @@ export async function ProductGrid({ filter active the grid still renders at this same 3-up density, simplest to keep one fixed lg: density rather than branching the whole grid on hasSidebarFilter too. */} - + {/* key'd on the rendered product set — same fix, same reason as + blog/page.tsx's RevealGroup: `whileInView` only fires once per + component instance, and a filter change (price/category/ + inStock) re-renders this same page in place rather than + remounting it, so RevealGroup itself never naturally unmounts + between filter states. Without the key, freshly swapped-in + RevealItems mounted into an already-settled parent and stayed + stuck at opacity 0 — the grid going blank/white after + applying a filter. */} + p.id).join(",")} + className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full" + > {products.map((product) => { const discount = discountPercent(product.price, product.compareAtPrice); const taxRate = effectiveTaxRate(product, defaultTaxRate);