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

---
 src/App.js | 53 +++++++++++++++++++++++++++--------------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

(limited to 'src/App.js')

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