From 33312f05377014e88df199e1ce83222631b8171a Mon Sep 17 00:00:00 2001 From: Dev Prashant Date: Fri, 19 Jun 2026 09:46:22 +0530 Subject: [PATCH 1/4] Fix frontend render bottleneck by caching wishlist (#186) --- frontend/scripts/product-cards-home.js | 17 +++++++++-------- frontend/scripts/script.js | 4 +++- frontend/scripts/shop.js | 8 +++++--- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/frontend/scripts/product-cards-home.js b/frontend/scripts/product-cards-home.js index 8de8108..43bf5d1 100644 --- a/frontend/scripts/product-cards-home.js +++ b/frontend/scripts/product-cards-home.js @@ -33,7 +33,8 @@ function safePrice( // render product card function createProductCard( - product + product, + wishlistIds = null ) { const rating = Math.min( @@ -160,7 +161,7 @@ function createProductCard( data-id="${product.id}" aria-label="Add to Wishlist" > - + @@ -185,13 +186,13 @@ function renderFeaturedProducts( product.featured ); + const wishlistIds = new Set(AppUtils.getWishlist().map(item => String(item.id))); + homeFeaturedContainer.innerHTML = featured.length ? featured .slice(0, 8) - .map( - createProductCard - ) + .map(p => createProductCard(p, wishlistIds)) .join("") : `

@@ -239,12 +240,12 @@ function renderNewArrivals( Number(product.featured) !== 1 ).slice(0, 8); + const wishlistIds = new Set(AppUtils.getWishlist().map(item => String(item.id))); + homeArrivalsContainer.innerHTML = arrivals.length ? arrivals - .map( - createProductCard - ) + .map(p => createProductCard(p, wishlistIds)) .join("") : `

diff --git a/frontend/scripts/script.js b/frontend/scripts/script.js index 440166b..50df492 100644 --- a/frontend/scripts/script.js +++ b/frontend/scripts/script.js @@ -138,12 +138,14 @@ function renderProducts(container, products = []) { const fragment = document.createDocumentFragment(); + const wishlistIds = new Set(AppUtils.getWishlist().map(item => String(item.id))); + AppUtils.safeArray(products).forEach((product) => { if (!product || !product.id) return; const card = document.createElement("div"); card.innerHTML = - typeof createProductCard === "function" ? createProductCard(product) : ""; + typeof createProductCard === "function" ? createProductCard(product, wishlistIds) : ""; const productElement = card.firstElementChild; if (productElement) { diff --git a/frontend/scripts/shop.js b/frontend/scripts/shop.js index ef8c89e..d3b769d 100644 --- a/frontend/scripts/shop.js +++ b/frontend/scripts/shop.js @@ -219,7 +219,8 @@ function renderStars( // PRODUCT CARD function createProductCard( - product + product, + wishlistIds = null ) { const displayName = product.name || @@ -278,7 +279,7 @@ function createProductCard( : `