diff options
Diffstat (limited to 'src/App.js')
-rw-r--r-- | src/App.js | 53 |
1 files changed, 27 insertions, 26 deletions
@@ -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> ); } |