feat: update product detail caching and component loading logic for improved SPA performance

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) {