summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJari Vetoniemi <jari.vetoniemi@indooratlas.com>2020-11-06 00:16:02 +0900
committerJari Vetoniemi <jari.vetoniemi@indooratlas.com>2020-11-06 00:16:02 +0900
commita39baaf6906ee6bb7709efd7068fc841f465edfa (patch)
tree7b20295910d464b7e04a0f1b52acde4dc2ea55d0
parent7ab5a2fdaf853b415e980100c8601520b1acdc6f (diff)
Lazyload store items
-rw-r--r--package-lock.json5
-rw-r--r--package.json1
-rw-r--r--src/App.js53
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>
);
}