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

feat: enhance image loading and socket handling in Product and Images components, and update prerender logic in App and ProductDetailPage

Browse Source
This commit is contained in:
sebseb7
2025-07-20 11:53:27 +02:00
parent 92987a518b
commit 3d136775e2
9 changed files with 188 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/PrerenderProduct.js
View File

@@ -71,12 +71,13 @@ class PrerenderProduct extends React.Component {
React.createElement(
AppBar,
{ position: 'sticky', color: 'primary', elevation: 0, sx: { zIndex: 1100 } },
React.createElement(
React.createElement(
Toolbar,
{ sx: { minHeight: 64, py: { xs: 0.5, sm: 0 } } },
React.createElement(
Container,
{ maxWidth: { xs: false, sm: 'lg' }, sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 }, width: '100%' } },
Box,
{ sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 }, maxWidth: { xs: 'none', sm: '1200px' }, mx: { xs: 0, sm: 'auto' }, width: '100%' } },
// Desktop: simple layout, Mobile: column layout with SearchBar space
React.createElement(
Box,
{
@@ -84,56 +85,36 @@ class PrerenderProduct extends React.Component {
display: 'flex',
alignItems: 'center',
width: '100%',
maxWidth: '100%',
flexDirection: { xs: 'column', sm: 'row' },
overflow: 'hidden'
flexDirection: { xs: 'column', sm: 'row' }
}
},
React.createElement(
Box,
{
sx: {
display: 'flex',
alignItems: 'center',
width: '100%',
maxWidth: '100%',
justifyContent: { xs: 'space-between', sm: 'flex-start' },
minHeight: { xs: 52, sm: 'auto' },
px: { xs: 0, sm: 0 },
overflow: 'hidden'
}
},
React.createElement(Logo),
// Invisible ButtonGroup placeholder for mobile layout
React.createElement(
Box,
{
sx: {
display: { xs: 'flex', sm: 'none' },
alignItems: 'flex-end',
transform: 'translateY(4px) translateX(9px)',
ml: 0,
visibility: 'hidden',
width: 120, // Approximate width of ButtonGroup
height: 40
}
}
)
),
// Invisible SearchBar placeholder for mobile - matches SPA layout
// First row: Logo (and ButtonGroup on mobile in SPA, but we don't need ButtonGroup in prerender)
React.createElement(
Box,
{
sx: {
display: 'flex',
alignItems: 'center',
width: '100%',
justifyContent: { xs: 'flex-start', sm: 'flex-start' }, // Keep desktop simple
minHeight: { xs: 52, sm: 'auto' },
px: { xs: 0, sm: 0 }
}
},
React.createElement(Logo)
),
// Second row: SearchBar placeholder only on mobile
React.createElement(
Box,
{
sx: {
display: { xs: 'block', sm: 'none' },
width: '100%',
maxWidth: '100%',
mt: { xs: 1, sm: 0 },
mb: { xs: 0.5, sm: 0 },
px: { xs: 0, sm: 0 },
height: 41, // Small TextField height
visibility: 'hidden',
overflow: 'hidden'
visibility: 'hidden'
}
}
)