From 8e6e020a1b90498068ba0cbae15616543f00ab69 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 20 Jul 2025 00:10:55 +0200
Subject: [PATCH] feat: update product detail caching and component loading
 logic for improved SPA performance

---
 prerender/renderer.cjs              |  5 ++--
 src/PrerenderProduct.js             | 22 ++++++++++--------
 src/components/ProductDetailPage.js | 36 +++++++++++++++++++++++------
 3 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/prerender/renderer.cjs b/prerender/renderer.cjs
index d5a9c67..07aac0e 100644
--- a/prerender/renderer.cjs
+++ b/prerender/renderer.cjs
@@ -207,10 +207,11 @@ const renderPage = (
   // Create script to populate window.productDetailCache for individual product pages
   let productDetailCacheScript = '';
   if (productData && productData.product) {
-    const productDetailCacheData = JSON.stringify(productData.product);
+    // Cache the entire response object (includes product, attributes, etc.)
+    const productDetailCacheData = JSON.stringify(productData);
     productDetailCacheScript = `
     <script>
-      // Populate window.productDetailCache with product data for SPA hydration
+      // Populate window.productDetailCache with complete product data for SPA hydration
       if (!window.productDetailCache) {
         window.productDetailCache = {};
       }
diff --git a/src/PrerenderProduct.js b/src/PrerenderProduct.js
index e80afdc..6b93892 100644
--- a/src/PrerenderProduct.js
+++ b/src/PrerenderProduct.js
@@ -81,15 +81,18 @@ class PrerenderProduct extends React.Component {
       ),
       React.createElement(
         Box,
-        {
-          sx: {
-            p: { xs: 2, md: 2 },
-            pb: { xs: 4, md: 8 },
-            maxWidth: "1400px",
-            mx: "auto",
-            flexGrow: 1
-          }
-        },
+        { sx: { flexGrow: 1 } },
+        React.createElement(
+          Box,
+          {
+            sx: {
+              p: { xs: 2, md: 2 },
+              pb: { xs: 4, md: 8 },
+              maxWidth: "1400px",
+              mx: "auto",
+              flexGrow: 1
+            }
+          },
         // Back button (breadcrumbs section)
         React.createElement(
           Box,
@@ -442,6 +445,7 @@ class PrerenderProduct extends React.Component {
             )
           )
         )
+      )
       ),
       React.createElement(Footer)
     );
diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js
index 4ce2fee..8893598 100644
--- a/src/components/ProductDetailPage.js
+++ b/src/components/ProductDetailPage.js
@@ -25,16 +25,28 @@ class ProductDetailPage extends Component {
       window.productDetailCache &&
       window.productDetailCache[this.props.seoName]
     ) {
+      const cachedData = window.productDetailCache[this.props.seoName];
+      
+      // Initialize komponenten from cached product data
+      const komponenten = [];
+      if(cachedData.product.komponenten) {
+        for(const komponent of cachedData.product.komponenten.split(",")) {
+          // Handle both "x" and "×" as separators
+          const [id, count] = komponent.split(/[x×]/);
+          komponenten.push({id: id.trim(), count: count.trim()});
+        }
+      }
+      
       this.state = {
-        product: window.productDetailCache[this.props.seoName],
+        product: cachedData.product,
         loading: false,
         error: null,
         attributeImages: {},
-        attributes: [],
+        attributes: cachedData.attributes || [],
         isSteckling: false,
         imageDialogOpen: false,
-        komponenten: [],
-        komponentenLoaded: false,
+        komponenten: komponenten,
+        komponentenLoaded: komponenten.length === 0, // If no komponenten, mark as loaded
         komponentenData: {}, // Store individual komponent data with loading states
         komponentenImages: {}, // Store tiny pictures for komponenten
         totalKomponentenPrice: 0,
@@ -68,7 +80,17 @@ class ProductDetailPage extends Component {
   }
 
   componentDidMount() {
-    this.loadProductData();
+    // Only load product data if not already cached
+    if (!this.state.product) {
+      this.loadProductData();
+    } else {
+      // Product is cached, but we still need to load komponenten if they exist
+      if (this.state.komponenten.length > 0 && !this.state.komponentenLoaded) {
+        for(const komponent of this.state.komponenten) {
+          this.loadKomponent(komponent.id, komponent.count);
+        }
+      }
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -350,8 +372,8 @@ class ProductDetailPage extends Component {
             window.productDetailCache = {};
           }
           
-          // Cache the product data
-          window.productDetailCache[this.props.seoName] = res.product;
+          // Cache the complete response data (product + attributes)
+          window.productDetailCache[this.props.seoName] = res;
           
           const komponenten = [];
           if(res.product.komponenten) {