From a68d912c9980d12f179f065dfde2e61f27a42b48 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 20 Jul 2025 15:05:29 +0200
Subject: [PATCH] feat: enhance image loading performance by adding
 fetchPriority and loading attributes in multiple components, and update MUI
 icons chunking in webpack configuration

---
 src/components/Images.js              | 4 ++++
 src/components/PhotoUpload.js         | 6 ++----
 src/components/Product.js             | 4 ++++
 src/components/ProductImage.js        | 2 ++
 src/components/ProductList.js         | 1 +
 src/components/profile/SettingsTab.js | 2 +-
 src/pages/GrowTentKonfigurator.js     | 4 +---
 webpack.config.js                     | 4 ++--
 8 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/Images.js b/src/components/Images.js
index 5a25788..2879e1a 100644
--- a/src/components/Images.js
+++ b/src/components/Images.js
@@ -132,6 +132,8 @@ class Images extends Component {
               component="img"
               height="400"
               image={getImagePath(this.props.pictureList)}
+              fetchPriority="high"
+              loading="eager"
               sx={{ 
                 objectFit: 'contain',
                 cursor: 'pointer',
@@ -170,6 +172,8 @@ class Images extends Component {
           <CardMedia 
             component="img" 
             height="400" 
+            fetchPriority="high"
+            loading="eager"
             sx={{ 
               objectFit: 'contain',
               cursor: 'pointer',
diff --git a/src/components/PhotoUpload.js b/src/components/PhotoUpload.js
index ecc8bf6..c33edc6 100644
--- a/src/components/PhotoUpload.js
+++ b/src/components/PhotoUpload.js
@@ -8,10 +8,8 @@ import {
   Grid,
   Alert
 } from '@mui/material';
-import {
-  Delete,
-  CloudUpload
-} from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import CloudUpload from '@mui/icons-material/CloudUpload';
 
 class PhotoUpload extends Component {
   constructor(props) {
diff --git a/src/components/Product.js b/src/components/Product.js
index a6a0afd..856a7b6 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -306,6 +306,8 @@ class Product extends Component {
                 height={ window.innerWidth < 600 ? "240" : "180" }
                 image="/assets/images/nopicture.jpg"
                 alt={name}
+                fetchPriority={this.props.priority === 'high' ? 'high' : 'auto'}
+                loading={this.props.priority === 'high' ? 'eager' : 'lazy'}
                 sx={{ 
                   objectFit: 'contain', 
                   borderTopLeftRadius: '8px', 
@@ -319,6 +321,8 @@ class Product extends Component {
                   height={ window.innerWidth < 600 ? "240" : "180" }
                   image={this.state.image}
                   alt={name}
+                  fetchPriority={this.props.priority === 'high' ? 'high' : 'auto'}
+                  loading={this.props.priority === 'high' ? 'eager' : 'lazy'}
                   sx={{ 
                     objectFit: 'contain', 
                     borderTopLeftRadius: '8px', 
diff --git a/src/components/ProductImage.js b/src/components/ProductImage.js
index ea8af83..5820b21 100644
--- a/src/components/ProductImage.js
+++ b/src/components/ProductImage.js
@@ -31,6 +31,8 @@ const ProductImage = ({
           height="400"
           image="/assets/images/nopicture.jpg"
           alt={product.name}
+          fetchPriority="high"
+          loading="eager"
           sx={{ objectFit: "cover" }}
         />
       )}
diff --git a/src/components/ProductList.js b/src/components/ProductList.js
index 4653c9d..88be347 100644
--- a/src/components/ProductList.js
+++ b/src/components/ProductList.js
@@ -476,6 +476,7 @@ class ProductList extends Component {
                 pictureList={product.pictureList}
                 availableSupplier={product.availableSupplier}
                 komponenten={product.komponenten}
+                priority={index < 6 ? 'high' : 'auto'}
                 t={this.props.t}
               />
             </Grid>
diff --git a/src/components/profile/SettingsTab.js b/src/components/profile/SettingsTab.js
index 9a9c7d5..ae6b152 100644
--- a/src/components/profile/SettingsTab.js
+++ b/src/components/profile/SettingsTab.js
@@ -11,7 +11,7 @@ import {
   IconButton,
   Snackbar
 } from '@mui/material';
-import { ContentCopy } from '@mui/icons-material';
+import ContentCopy from '@mui/icons-material/ContentCopy';
 import { withI18n } from '../../i18n/withTranslation.js';
 
 class SettingsTab extends Component {
diff --git a/src/pages/GrowTentKonfigurator.js b/src/pages/GrowTentKonfigurator.js
index a95bb2a..650532e 100644
--- a/src/pages/GrowTentKonfigurator.js
+++ b/src/pages/GrowTentKonfigurator.js
@@ -11,9 +11,7 @@ import {
   ListItemText,
   ListItemSecondaryAction,
 } from '@mui/material';
-import {
-  ShoppingCart as ShoppingCartIcon,
-} from '@mui/icons-material';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { TentShapeSelector, ProductSelector, ExtrasSelector } from '../components/configurator/index.js';
 import { tentShapes, tentSizes, lightTypes, ventilationTypes, extras } from '../data/configuratorData.js';
 
diff --git a/webpack.config.js b/webpack.config.js
index c10252c..0d5e808 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -223,7 +223,7 @@ export default {
         },
         // Split commonly used MUI icons (used in main bundle and immediate-loading components)
         muiIconsCommon: {
-          test: /[\\/]node_modules[\\/]@mui[\\/]icons-material[\\/].*(SmartToy|Palette|Search|Home|ShoppingCart|Close|ChevronLeft|ChevronRight|Person|Google|Add|Remove|Delete|KeyboardArrowUp|ZoomIn|Loupe|ExpandMore|ExpandLess|Mic|Stop|PhotoCamera).*\.js$/,
+          test: /[\\/]node_modules[\\/]@mui[\\/]icons-material[\\/].*(SmartToy|Palette|Search|Home|ShoppingCart|Close|ChevronLeft|ChevronRight|Person|Google|Add|Remove|Delete|KeyboardArrowUp|ZoomIn|Loupe|ExpandMore|ExpandLess|Mic|Stop|PhotoCamera|Menu|KeyboardReturn|ContentCopy|Cancel|CloudUpload|Star).*\.js$/,
           name: 'mui-icons-common',
           priority: 29,
           reuseExistingChunk: true,
@@ -231,7 +231,7 @@ export default {
         },
         // Split remaining MUI icons into separate chunk (for lazy-loaded components only)
         muiIcons: {
-          test: /[\\/]node_modules[\\/]@mui[\\/]icons-material[\\/]/,
+          test: /[\\/]node_modules[\\/]@mui[\\/]icons-material[\\/].*(Article|LockReset|AdminPanelSettings|Group|BarChart).*\.js$/,
           name: 'mui-icons', 
           priority: 28,
           reuseExistingChunk: true,