Refactor pagination visibility in ProductList component to prevent layout shifts when no products are available. Updated logic to use CSS visibility instead of conditional rendering.

src/components/ProductList.js

@@ -122,13 +122,17 @@ class ProductList extends Component {
   }
 
   renderPagination = (pages, page) => {
+    // Make pagination invisible when there are zero products to avoid layout shifts
+    const hasProducts = this.props.products.length > 0;
+    
     return (
       <Box sx={{ 
         height: 64, 
         display: 'flex', 
         alignItems: 'center', 
         justifyContent: 'left',
-        width: '100%'
+        width: '100%',
+        visibility: hasProducts ? 'visible' : 'hidden'
       }}>
         {(this.state.itemsPerPage==='all')?null:
           <Pagination 
@@ -156,6 +160,57 @@ class ProductList extends Component {
     );
   }
 
+  // Check if filters are active
+  hasActiveFilters = () => {
+    return (
+      (this.props.activeAttributeFilters && this.props.activeAttributeFilters.length > 0) ||
+      (this.props.activeManufacturerFilters && this.props.activeManufacturerFilters.length > 0) ||
+      (this.props.activeAvailabilityFilters && this.props.activeAvailabilityFilters.length > 0)
+    );
+  }
+
+  // Render message when no products found but filters are active
+  renderNoProductsMessage = () => {
+    const hasFiltersActive = this.hasActiveFilters();
+    const hasUnfilteredProducts = this.props.totalProductCount > 0;
+    
+    if (this.props.products.length === 0 && hasUnfilteredProducts && hasFiltersActive) {
+      return (
+        <Box sx={{ 
+          display: 'flex', 
+          justifyContent: 'center', 
+          alignItems: 'center',
+          py: 4,
+          px: 2
+        }}>
+          <Typography variant="h6" color="text.secondary" sx={{ textAlign: 'center' }}>
+            Entferne Filter um Produkte zu sehen
+          </Typography>
+        </Box>
+      );
+    }
+    return null;
+  }
+
+  // Helper function for correct pluralization
+  getProductCountText = () => {
+    const filteredCount = this.props.products.length;
+    const totalCount = this.props.totalProductCount;
+    const isFiltered = totalCount !== filteredCount;
+    
+    if (!isFiltered) {
+      // No filters applied
+      if (filteredCount === 0) return "0 Produkte";
+      if (filteredCount === 1) return "1 Produkt";
+      return `${filteredCount} Produkte`;
+    } else {
+      // Filters applied
+      if (totalCount === 0) return "0 Produkte";
+      if (totalCount === 1) return `${filteredCount} von 1 Produkt`;
+      return `${filteredCount} von ${totalCount} Produkten`;
+    }
+  }
+
   render() {
     //console.log('products',this.props.activeAttributeFilters,this.props.activeManufacturerFilters,window.currentSearchQuery,this.state.sortBy);
     
@@ -352,13 +407,8 @@ class ProductList extends Component {
                 display: { xs: 'block', sm: 'none' },
                 ml: 1
               }}>
-                <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.75rem' }}>
+                <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.75rem', whiteSpace: 'nowrap' }}>
-                  {
+                  {this.getProductCountText()}
-                    this.props.totalProductCount==this.props.products.length && this.props.totalProductCount>0 ?
-                    `${this.props.totalProductCount} Produkte`
-                    :
-                    `${this.props.products.length} von ${this.props.totalProductCount} Produkte`
-                  }
                 </Typography>
               </Box>
             </Box>
@@ -381,18 +431,14 @@ class ProductList extends Component {
                 {/*this.props.dataType == 'category' && (<>Kategorie: {this.props.dataParam}</>)}*/}
                 {this.props.dataType == 'search' && (<>Suchergebnisse für: "{this.props.dataParam}"</>)}
           </Typography>
-          <Typography variant="body2" color="text.secondary">
+          <Typography variant="body2" color="text.secondary" sx={{ whiteSpace: 'nowrap' }}>
-                {
+                {this.getProductCountText()}
-                  this.props.totalProductCount==this.props.products.length && this.props.totalProductCount>0 ?
-                `${this.props.totalProductCount} Produkte`
-                :
-                `${this.props.products.length} von ${this.props.totalProductCount} Produkte`
-                }
           </Typography>
         </Stack>
         </Box>
 
         <Grid container spacing={{ xs: 0, sm: 2 }}>
+          {this.renderNoProductsMessage()}
           {products.map((product, index) => (
             <Grid 
               key={product.id}