fix: decent lazy-loading, missing alt props

mathcale · Apr 28, 2020 · 94f50d7 · 94f50d7 · vercel · Apr 28, 2020
1 parent b49a0c5
commit 94f50d7
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coronavirus-dashboard",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": {
     "name": "Matheus Calegaro",
     "email": "[email protected]",
@@ -29,6 +29,7 @@
     "react-apexcharts": "^1.3.7",
     "react-dom": "^16.13.0",
     "react-jvectormap": "^0.0.16",
+    "react-lazy-load-image-component": "^1.4.3",
     "react-simple-maps": "^2.0.0",
     "react-tooltip": "^4.2.5",
     "styled-components": "^5.0.1"

diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -1,4 +1,6 @@
 import styled from 'styled-components';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
 import { brazilianStates } from '../../utils';
 import { StateFlag } from '../StateFlag/StateFlag';
 
@@ -268,7 +270,7 @@ export const CardFOV = () => (
 export const CountrySummaryCard = props => (
   <Card countrySummary>
     <div className="country-summary--title">
-      <img src={props.flag} alt={props.name} />
+      <LazyLoadImage src={props.flag} alt={props.name} width={32} height={21} />
       <h3>{props.name}</h3>
     </div>
 

diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
@@ -9,7 +9,7 @@ import { PageAwareLink } from '../PageAwareLink/PageAwareLink';
 const Tooltip = dynamic(
   () => import('../Tooltip/Tooltip'),
   { ssr: false },
-)
+);
 
 const StyledLi = styled.li`
   display: flex;

diff --git a/src/components/StateFlag/StateFlag.js b/src/components/StateFlag/StateFlag.js
@@ -5,5 +5,5 @@ const StyledImg = styled.img`
 `;
 
 export const StateFlag = ({ state }) => (
-  <StyledImg src={`/img/flags/bandeira_${state.toLowerCase()}.png`} />
+  <StyledImg src={`/img/flags/bandeira_${state.toLowerCase()}.png`} alt={state} />
 );
diff --git a/src/components/SummaryItem/SummaryItem.js b/src/components/SummaryItem/SummaryItem.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 const SummaryItemContainer = styled.div`
   display: flex;
@@ -28,7 +29,7 @@ const SummaryItemContainer = styled.div`
 export const SummaryItem = props => (
   <SummaryItemContainer>
     {props.flag && (
-      <img src={props.flag} alt={props.name} loading="lazy" />
+      <LazyLoadImage src={props.flag} alt={props.name} width={32} height={21} />
     )}
 
     <p className="world-summary-item--name">{props.name}</p>

diff --git a/src/pages/news.js b/src/pages/news.js
@@ -11,7 +11,7 @@ const NewsPage = ({ news }) => {
             <Card news>
               <div className="news-card--image">
                 {n.imagem !== '' ? (
-                  <img src={n.imagem} title={n.titulo} alt={n.titulo} loading="lazy" />
+                  <img src={n.imagem} title={n.titulo} alt={n.titulo} />
                 ) : (
                   <p>Sem Imagem</p>
                 )}

diff --git a/yarn.lock b/yarn.lock
@@ -3909,6 +3909,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -3929,6 +3934,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -5165,6 +5175,14 @@ react-jvectormap@^0.0.16:
     jvectormap-next "^3.0.0"
     prop-types "^15.6.0"
 
+react-lazy-load-image-component@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/react-lazy-load-image-component/-/react-lazy-load-image-component-1.4.3.tgz#841235111c4bbb7d69238ba7e16ded04d1461c06"
+  integrity sha512-F7SuCjqJkfRUXAcVxx3mms92mbO6W20v+utPRAQHHncT6KJF61XPo1TLL2e+9LhuA/KZkIsSr7xo7srItbVefg==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+
 react-simple-maps@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-simple-maps/-/react-simple-maps-2.0.0.tgz#877e27b15a95ef1602b7e3e24185bb7f095ac4a2"