diff options
author | Jari Vetoniemi <jari.vetoniemi@indooratlas.com> | 2020-11-06 00:16:02 +0900 |
---|---|---|
committer | Jari Vetoniemi <jari.vetoniemi@indooratlas.com> | 2020-11-06 00:16:02 +0900 |
commit | a39baaf6906ee6bb7709efd7068fc841f465edfa (patch) | |
tree | 7b20295910d464b7e04a0f1b52acde4dc2ea55d0 | |
parent | 7ab5a2fdaf853b415e980100c8601520b1acdc6f (diff) |
Lazyload store items
-rw-r--r-- | package-lock.json | 5 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | 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" }, @@ -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> ); } |