From 0eca7a9986cb5730cc64c858803a1a8040a7bc72 Mon Sep 17 00:00:00 2001
From: Jari Vetoniemi <jari.vetoniemi@indooratlas.com>
Date: Thu, 12 Nov 2020 19:33:57 +0900
Subject: lazy-load card images

---
 src/App.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

(limited to 'src/App.js')

diff --git a/src/App.js b/src/App.js
index ef78070..96f3aa9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -172,14 +172,18 @@ function StoreItem(props) {
                      subheader={props.data.author}
                      subheaderTypographyProps={{className: classes.text}}
                   />
-                  <CardMedia className={classes.media}
-                     image={props.data.img}
-                     title={props.data.title}
-                  >
+                  <div className={classes.media}>
+                     <CardMedia
+                        component='img'
+                        loading='lazy'
+                        image={props.data.img}
+                        title={props.data.title}
+                        style={{height: '100%', backgroundImage:'url(/loading.png)'}}
+                     />
                      <Chip label={props.data.price} className={classes.price}/>
                      <Chip label={t(props.data.cat)} className={classes.cat}/>
-                     <Rating name="size-small" size="small" className={classes.rating} readOnly defaultValue={props.data.rating} precision={0.5}/>
-                  </CardMedia>
+                     <Rating size="small" className={classes.rating} readOnly defaultValue={props.data.rating} precision={0.5}/>
+                  </div>
                </CardActionArea>
             </Card>
          </Grow>
-- 
cgit v1.2.3