From a39baaf6906ee6bb7709efd7068fc841f465edfa Mon Sep 17 00:00:00 2001
From: Jari Vetoniemi <jari.vetoniemi@indooratlas.com>
Date: Fri, 6 Nov 2020 00:16:02 +0900
Subject: Lazyload store items

---
 package-lock.json |  5 +++++
 package.json      |  1 +
 src/App.js        | 53 +++++++++++++++++++++++++++--------------------------
 3 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b923f1f..23acd40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11914,6 +11914,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
       "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
     },
+    "react-lazyload": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-3.1.0.tgz",
+      "integrity": "sha512-WNkWS2jlLnAud2uEqi/Ud4TEjzOQzsN97NzbeRodB9k0TepnoadXDU2bee3PvfP3vpbepsZ716FjSb+xS1W4UQ=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
diff --git a/package.json b/package.json
index 9f5dcbe..22ee047 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-i18next": "^11.7.3",
+    "react-lazyload": "^3.1.0",
     "react-scripts": "4.0.0",
     "web-vitals": "^0.2.4"
   },
diff --git a/src/App.js b/src/App.js
index 591b890..170bf18 100644
--- a/src/App.js
+++ b/src/App.js
@@ -43,6 +43,7 @@ import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 import Grow from '@material-ui/core/Grow';
+import LazyLoad from 'react-lazyload';
 import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
 import { useWindowDimensions } from './utils.js';
 import 'pure-react-carousel/dist/react-carousel.es.css';
@@ -75,6 +76,30 @@ function StoreItemDetails(props) {
    );
 }
 
+function StoreItemSkeleton(props) {
+   return (
+      <Grow in={true}>
+         <div className={props.className}>
+            <Box display="flex" alignItems="center">
+               <Box margin={1}>
+                  <Skeleton variant="circle">
+                  <Avatar/>
+                  </Skeleton>
+               </Box>
+               <Box width="100%">
+                  <Skeleton width="100%">
+                  <Typography>.</Typography>
+                  </Skeleton>
+               </Box>
+            </Box>
+            <Skeleton variant="rect" width="100%">
+               <div style={{ paddingTop: '200px' }} />
+            </Skeleton>
+         </div>
+      </Grow>
+   );
+}
+
 function StoreItem(props) {
    const { t } = useTranslation();
 
@@ -97,7 +122,7 @@ function StoreItem(props) {
    }))();
 
    return (
-      <>
+      <LazyLoad resize once placeholder={<StoreItemSkeleton className={props.className}/>}>
          <Grow in={true}>
             <Card className={props.className} variant="outlined">
                <CardActionArea>
@@ -123,31 +148,7 @@ function StoreItem(props) {
                </CardActionArea>
             </Card>
          </Grow>
-      </>
-   );
-}
-
-function StoreItemSkeleton(props) {
-   return (
-      <Grow in={true}>
-         <div className={props.className}>
-            <Box display="flex" alignItems="center">
-               <Box margin={1}>
-                  <Skeleton variant="circle">
-                  <Avatar/>
-                  </Skeleton>
-               </Box>
-               <Box width="100%">
-                  <Skeleton width="100%">
-                  <Typography>.</Typography>
-                  </Skeleton>
-               </Box>
-            </Box>
-            <Skeleton variant="rect" width="100%">
-               <div style={{ paddingTop: '200px' }} />
-            </Skeleton>
-         </div>
-      </Grow>
+      </LazyLoad>
    );
 }
 
-- 
cgit v1.2.3