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

2
prerender-single-product.cjs
View File

@@ -57,7 +57,7 @@ const config = require("./prerender/config.cjs");
const shopConfig = require("./src/config.js").default;
const { renderPage } = require("./prerender/renderer.cjs");
const { generateProductMetaTags, generateProductJsonLd } = require("./prerender/seo.cjs");
const { fetchProductDetails } = require("./prerender/data-fetching.cjs");
const { fetchProductDetails, saveProductImages } = require("./prerender/data-fetching.cjs");
// Import product component
const PrerenderProduct = require("./src/PrerenderProduct.js").default;

7
prerender/renderer.cjs
View File

@@ -183,6 +183,11 @@ const renderPage = (
content: ${JSON.stringify(renderedMarkup)},
timestamp: ${Date.now()}
};
// DEBUG: Multiple alerts throughout the loading process
// Debug alerts removed
</script>
`;
@@ -239,8 +244,10 @@ const renderPage = (
let newHtml;
if (rootDivRegex.test(template)) {
if (!suppressLogs) console.log(` 📝 Root div found, replacing with ${renderedMarkup.length} chars of markup`);
newHtml = template.replace(rootDivRegex, replacementHtml);
} else {
if (!suppressLogs) console.log(` ⚠️ No root div found, appending to body`);
newHtml = template.replace("<body>", `<body>${replacementHtml}`);
}

55
src/App.js
View File

@@ -32,11 +32,15 @@ import Header from "./components/Header.js";
import Footer from "./components/Footer.js";
import MainPageLayout from "./components/MainPageLayout.js";
// Lazy load all route components to reduce initial bundle size
const Content = lazy(() => import(/* webpackChunkName: "content" */ "./components/Content.js"));
const ProductDetailWithSocket = lazy(() => import(/* webpackChunkName: "product-detail" */ "./components/ProductDetailWithSocket.js"));
const ProfilePageWithSocket = lazy(() => import(/* webpackChunkName: "profile" */ "./pages/ProfilePage.js"));
const ResetPassword = lazy(() => import(/* webpackChunkName: "reset-password" */ "./pages/ResetPassword.js"));
// TEMPORARILY DISABLE ALL LAZY LOADING TO ELIMINATE CircularProgress
import Content from "./components/Content.js";
import ProductDetailWithSocket from "./components/ProductDetailWithSocket.js";
import ProfilePageWithSocket from "./pages/ProfilePage.js";
import ResetPassword from "./pages/ResetPassword.js";
// const Content = lazy(() => import(/* webpackChunkName: "content" */ "./components/Content.js"));
// const ProductDetailWithSocket = lazy(() => import(/* webpackChunkName: "product-detail" */ "./components/ProductDetailWithSocket.js"));
// const ProfilePageWithSocket = lazy(() => import(/* webpackChunkName: "profile" */ "./pages/ProfilePage.js"));
// const ResetPassword = lazy(() => import(/* webpackChunkName: "reset-password" */ "./pages/ResetPassword.js"));
// Lazy load admin pages - only loaded when admin users access them
const AdminPage = lazy(() => import(/* webpackChunkName: "admin" */ "./pages/AdminPage.js"));
@@ -201,6 +205,14 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
<Header active categoryId={categoryId} key={authVersion} />
<Box sx={{ flexGrow: 1 }}>
<Suspense fallback={
// Use prerender fallback if available, otherwise show loading spinner
typeof window !== "undefined" && window.__PRERENDER_FALLBACK__ ? (
<div
dangerouslySetInnerHTML={{
__html: window.__PRERENDER_FALLBACK__.content,
}}
/>
) : (
<Box
sx={{
display: "flex",
@@ -211,6 +223,7 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
>
<CircularProgress color="primary" />
</Box>
)
}>
<CarouselProvider>
<Routes>
@@ -280,7 +293,17 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
</Box>
{/* Conditionally render the Chat Assistant */}
{isChatOpen && (
<Suspense fallback={<CircularProgress size={20} />}>
<Suspense fallback={
typeof window !== "undefined" && window.__PRERENDER_FALLBACK__ ? (
<div
dangerouslySetInnerHTML={{
__html: window.__PRERENDER_FALLBACK__.content,
}}
/>
) : (
<CircularProgress size={20} />
)
}>
<ChatAssistant
open={isChatOpen}
onClose={handleChatClose}
@@ -344,7 +367,17 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
{/* Development-only Theme Customizer Dialog */}
{isDevelopment && isThemeCustomizerOpen && (
<Suspense fallback={<CircularProgress size={20} />}>
<Suspense fallback={
typeof window !== "undefined" && window.__PRERENDER_FALLBACK__ ? (
<div
dangerouslySetInnerHTML={{
__html: window.__PRERENDER_FALLBACK__.content,
}}
/>
) : (
<CircularProgress size={20} />
)
}>
<ThemeCustomizerDialog
open={isThemeCustomizerOpen}
onClose={() => setThemeCustomizerOpen(false)}
@@ -382,6 +415,13 @@ const App = () => {
<SocketProvider
url={config.apiBaseUrl}
fallback={
typeof window !== "undefined" && window.__PRERENDER_FALLBACK__ ? (
<div
dangerouslySetInnerHTML={{
__html: window.__PRERENDER_FALLBACK__.content,
}}
/>
) : (
<Box
sx={{
display: "flex",
@@ -392,6 +432,7 @@ const App = () => {
>
<CircularProgress color="primary" />
</Box>
)
}
>
<AppContent

39
src/PrerenderProduct.js
View File

@@ -75,8 +75,9 @@ class PrerenderProduct extends React.Component {
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,11 +85,10 @@ 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' }
}
},
// First row: Logo (and ButtonGroup on mobile in SPA, but we don't need ButtonGroup in prerender)
React.createElement(
Box,
{
@@ -96,44 +96,25 @@ class PrerenderProduct extends React.Component {
display: 'flex',
alignItems: 'center',
width: '100%',
maxWidth: '100%',
justifyContent: { xs: 'space-between', sm: 'flex-start' },
justifyContent: { xs: 'flex-start', sm: 'flex-start' }, // Keep desktop simple
minHeight: { xs: 52, sm: 'auto' },
px: { xs: 0, sm: 0 },
overflow: 'hidden'
px: { xs: 0, sm: 0 }
}
},
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
}
}
)
React.createElement(Logo)
),
// Invisible SearchBar placeholder for mobile - matches SPA layout
// 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'
}
}
)

2
src/components/CartItem.js
View File

@@ -20,7 +20,7 @@ class CartItem extends Component {
this.setState({image:window.tinyPicCache[picid],loading:false, error: false})
}else{
this.setState({image: null, loading: true, error: false});
if(this.props.socket){
if(this.props.socket && this.props.socket.connected){
this.props.socket.emit('getPic', { bildId:picid, size:'tiny' }, (res) => {
if(res.success){
window.tinyPicCache[picid] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));

25
src/components/Images.js
View File

@@ -12,7 +12,7 @@ import LoupeIcon from '@mui/icons-material/Loupe';
class Images extends Component {
constructor(props) {
super(props);
this.state = { mainPic:0,pics:[]};
this.state = { mainPic:0,pics:[], needsSocketRetry: false };
}
componentDidMount () {
@@ -22,6 +22,15 @@ class Images extends Component {
if (prevProps.fullscreenOpen !== this.props.fullscreenOpen) {
this.updatePics();
}
// Retry loading images if socket just became available
const wasConnected = prevProps.socketB && prevProps.socketB.connected;
const isNowConnected = this.props.socketB && this.props.socketB.connected;
if (!wasConnected && isNowConnected && this.state.needsSocketRetry) {
this.setState({ needsSocketRetry: false });
this.updatePics();
}
}
updatePics = (newMainPic = this.state.mainPic) => {
@@ -49,10 +58,10 @@ class Images extends Component {
pics.push(window.smallPicCache[bildId]);
this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
}else if(window.tinyPicCache[bildId]){
pics.push(bildId);
pics.push(window.tinyPicCache[bildId]);
this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
}else{
pics.push(bildId);
pics.push(`/assets/images/prod${bildId}.jpg`);
this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
}
}else{
@@ -67,7 +76,8 @@ class Images extends Component {
}
}
}
console.log('pics',pics);
console.log('DEBUG: pics array contents:', pics);
console.log('DEBUG: pics array types:', pics.map(p => typeof p + ': ' + p));
this.setState({ pics, mainPic: newMainPic });
}else{
if(this.state.pics.length > 0) this.setState({ pics:[], mainPic: newMainPic });
@@ -75,6 +85,13 @@ class Images extends Component {
}
loadPic = (size,bildId,index) => {
// Check if socketB is available and connected before emitting
if (!this.props.socketB || !this.props.socketB.connected) {
console.log("Images: socketB not available, will retry when connected");
this.setState({ needsSocketRetry: true });
return;
}
this.props.socketB.emit('getPic', { bildId, size }, (res) => {
if(res.success){
const url = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));

46
src/components/Product.js
View File

@@ -28,6 +28,43 @@ class Product extends Component {
}else{
this.state = {image: null, loading: true, error: false};
console.log("Product: Fetching image from socketB", this.props.socketB);
// Check if socketB is available and connected before emitting
if (this.props.socketB && this.props.socketB.connected) {
this.loadImage(bildId);
} else {
// Socket not available, set error state or wait
console.log("Product: socketB not available, will retry when connected");
this.state.error = true;
this.state.loading = false;
}
}
}else{
this.state = {image: null, loading: false, error: false};
}
}
componentDidMount() {
this._isMounted = true;
}
componentDidUpdate(prevProps) {
// Retry loading image if socket just became available
const wasConnected = prevProps.socketB && prevProps.socketB.connected;
const isNowConnected = this.props.socketB && this.props.socketB.connected;
if (!wasConnected && isNowConnected && this.state.error && this.props.pictureList) {
// Socket just connected and we had an error, retry loading
const bildId = this.props.pictureList.split(',')[0];
if (!window.smallPicCache[bildId]) {
this.setState({loading: true, error: false});
this.loadImage(bildId);
}
}
}
loadImage = (bildId) => {
if (this.props.socketB && this.props.socketB.connected) {
this.props.socketB.emit('getPic', { bildId, size:'small' }, (res) => {
if(res.success){
window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
@@ -46,15 +83,8 @@ class Product extends Component {
this.state.loading = false;
}
}
})
});
}
}else{
this.state = {image: null, loading: false, error: false};
}
}
componentDidMount() {
this._isMounted = true;
}
componentWillUnmount() {

17
src/components/ProductDetailPage.js
View File

@@ -356,7 +356,6 @@ class ProductDetailPage extends Component {
if (!this.props.socket || !this.props.socket.connected) {
// Socket not connected yet, but don't show error immediately on first load
// The componentDidUpdate will retry when socket connects
console.log("Socket not connected yet, waiting for connection to load product data");
return;
}
@@ -542,7 +541,23 @@ class ProductDetailPage extends Component {
const { product, loading, error, attributeImages, isSteckling, attributes, komponentenLoaded, komponentenData, komponentenImages, totalKomponentenPrice, totalSavings } =
this.state;
// Debug alerts removed
if (loading) {
// Check if prerender fallback is available
if (typeof window !== "undefined" && window.__PRERENDER_FALLBACK__) {
return (
<div
dangerouslySetInnerHTML={{
__html: window.__PRERENDER_FALLBACK__.content,
}}
/>
);
}
// Fallback to loading message if no prerender content
return (
<Box
sx={{