From 94f50d7a7f569968ae33511f8c8dde55d31f6bf5 Mon Sep 17 00:00:00 2001 From: Matheus Calegaro <matheuscalegaro@outlook.com> Date: Tue, 28 Apr 2020 12:36:24 -0300 Subject: [PATCH] fix: decent lazy-loading, missing alt props --- package.json | 3 ++- src/components/Card/Card.js | 4 +++- src/components/Sidebar/Sidebar.js | 2 +- src/components/StateFlag/StateFlag.js | 2 +- src/components/SummaryItem/SummaryItem.js | 3 ++- src/pages/news.js | 2 +- yarn.lock | 18 ++++++++++++++++++ 7 files changed, 28 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index f36b61a..2cb66bc 100644 --- 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": "hello@matheus.me", @@ -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 index 403a869..7c94fea 100644 --- 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 index 74127ef..17d2429 100644 --- 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 index 531bc61..d4ac9a5 100644 --- 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 index 2d7f211..3daae4d 100644 --- 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 index a24d2bf..5c2af97 100644 --- 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 index d111d79..3766923 100644 --- 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"