From 13bb62ce38c8b3bf00ccbfdd2156f50a4631549a Mon Sep 17 00:00:00 2001
From: "Huy Tran (Harry)" <huytran.quang080199@gmail.com>
Date: Sat, 1 May 2021 23:41:16 +1000
Subject: [PATCH] fix: add optimize-image in image-scroller (#78)

---
 src/components/ImageScroller.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ImageScroller.js b/src/components/ImageScroller.js
index 89e080d2b..d69d5fb08 100644
--- a/src/components/ImageScroller.js
+++ b/src/components/ImageScroller.js
@@ -1,14 +1,8 @@
 import React, { useState, useRef } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import {
-  Fab,
-  Grid,
-  CircularProgress,
-  Card,
-  CardMedia,
-  Button,
-} from '@material-ui/core';
+import { Fab, Grid, CircularProgress, Card, Button } from '@material-ui/core';
 import { ChevronLeft, ChevronRight } from '@material-ui/icons';
+import OptimizedImage from './OptimizedImage';
 
 /* This component currently uses fixed size cards and scroll window,
  * but it wouldn't be too difficult to make it more flexible.
@@ -129,7 +123,13 @@ export default function ImageScroller(props) {
                 img === selectedImage && classes.selectedImageCard
               }`}
             >
-              <CardMedia image={img} title={img} className={classes.image} />
+              <OptimizedImage
+                src={img}
+                width={182}
+                height={192}
+                className={classes.image}
+                fixed
+              />
             </Card>
           ))
         ) : (