seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

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.

Browse Source
This commit is contained in:
seb
2025-07-05 15:21:38 +02:00
parent 8ea3b1b6a3
commit f81b9d12df
1 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ProductList.js
View File

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