From f81b9d12dfa397dc63e28072f2a3908c83dff906 Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Sat, 5 Jul 2025 15:21:38 +0200
Subject: [PATCH] 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 | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/ProductList.js b/src/components/ProductList.js
index b5d0e4a..fe53a9a 100644
--- a/src/components/ProductList.js
+++ b/src/components/ProductList.js
@@ -122,10 +122,8 @@ class ProductList extends Component {
   }
 
   renderPagination = (pages, page) => {
-    // Don't show pagination when there are zero products
-    if (this.props.products.length === 0) {
-      return null;
-    }
+    // Make pagination invisible when there are zero products to avoid layout shifts
+    const hasProducts = this.props.products.length > 0;
     
     return (
       <Box sx={{ 
@@ -133,7 +131,8 @@ class ProductList extends Component {
         display: 'flex', 
         alignItems: 'center', 
         justifyContent: 'left',
-        width: '100%'
+        width: '100%',
+        visibility: hasProducts ? 'visible' : 'hidden'
       }}>
         {(this.state.itemsPerPage==='all')?null:
           <Pagination