Skip to content

Commit 9444bdc

Browse files
EugeneHlushkoEugeneHlushko
committed
speed(homepage) offload images until in viewport
1 parent 00e6773 commit 9444bdc

File tree

3 files changed

+65
-37
lines changed

3 files changed

+65
-37
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@
152152
"react-markdown": "4.0.4",
153153
"react-router-dom": "^4.2.2",
154154
"react-tiny-popover": "3.4.2",
155+
"react-visibility-sensor": "^5.0.2",
155156
"webpack.vote": "^0.1.2",
156157
"whatwg-fetch": "^2.0.3"
157158
}

‎src/components/Support/Support.jsx‎

Lines changed: 57 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Import External Dependencies
22
import React from 'react';
3+
import VisibilitySensor from 'react-visibility-sensor';
34

45
// Import Data
56
import Backers from './_supporters.json';
@@ -62,8 +63,22 @@ function formatMoney(number) {
6263
}
6364

6465
export default class Support extends React.Component {
66+
constructor(props) {
67+
super(props);
68+
this.state = {
69+
isVisible: false
70+
};
71+
}
72+
73+
onChange = (isVisible) => {
74+
if (!this.state.isVisible && isVisible) {
75+
this.setState({ isVisible });
76+
}
77+
}
78+
6579
render() {
6680
let { rank } = this.props;
81+
let { isVisible } = this.state;
6782

6883
let supporters = SUPPORTERS;
6984
let minimum, maximum, maxAge, limit, random;
@@ -108,45 +123,50 @@ export default class Support extends React.Component {
108123
}
109124

110125
return (
111-
<div className="support">
112-
<div className="support__description">
113-
{ rank === 'backer' ? (
114-
<p>
115-
The following <b>Backers</b> are individuals who have contributed various amounts of money in order to help support webpack. Every little bit helps, and we appreciate even the smallest contributions. This list shows {random} randomly chosen backers:
116-
</p>
117-
) : rank === 'latest' ? (
118-
<p>The following persons/organizations made their first donation in the last {Math.round(maxAge / (1000 * 60 * 60 * 24))} days (limited to the top {limit}).</p>
119-
) : (
120-
<p>
121-
<b className="support__rank">{ rank } sponsors</b>
122-
<span>are those who have pledged { minimum ? `$${formatMoney(minimum)}` : 'up' } { maximum ? `to $${formatMoney(maximum)}` : 'or more' } to webpack.</span>
123-
</p>
124-
)}
125-
</div>
126-
127-
{
128-
supporters.map((supporter, index) => (
129-
<a key={ supporter.id || supporter.slug || index }
130-
className="support__item"
131-
title={ `$${formatMoney(supporter.totalDonations / 100)} by ${supporter.name || supporter.slug}` }
132-
target="_blank"
133-
rel="noopener nofollow"
134-
href={ supporter.website || `https://opencollective.com/${supporter.slug}` }>
135-
{<img
136-
className={ `support__${rank}-avatar` }
137-
src={ supporter.avatar || SmallIcon }
138-
alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' }
139-
onError={ this._handleImgError } />}
126+
<VisibilitySensor partialVisibility
127+
intervalCheck
128+
intervalDelay={ 250 }
129+
onChange={ this.onChange }>
130+
<div className="support">
131+
<div className="support__description">
132+
{ rank === 'backer' ? (
133+
<p>
134+
The following <b>Backers</b> are individuals who have contributed various amounts of money in order to help support webpack. Every little bit helps, and we appreciate even the smallest contributions. This list shows {random} randomly chosen backers:
135+
</p>
136+
) : rank === 'latest' ? (
137+
<p>The following persons/organizations made their first donation in the last {Math.round(maxAge / (1000 * 60 * 60 * 24))} days (limited to the top {limit}).</p>
138+
) : (
139+
<p>
140+
<b className="support__rank">{ rank } sponsors</b>
141+
<span>are those who have pledged { minimum ? `$${formatMoney(minimum)}` : 'up' } { maximum ? `to $${formatMoney(maximum)}` : 'or more' } to webpack.</span>
142+
</p>
143+
)}
144+
</div>
145+
146+
{
147+
supporters.map((supporter, index) => (
148+
<a key={ supporter.id || supporter.slug || index }
149+
className="support__item"
150+
title={ `$${formatMoney(supporter.totalDonations / 100)} by ${supporter.name || supporter.slug}` }
151+
target="_blank"
152+
rel="noopener nofollow"
153+
href={ supporter.website || `https://opencollective.com/${supporter.slug}` }>
154+
{<img
155+
className={ `support__${rank}-avatar` }
156+
src={ (isVisible && supporter.avatar) ? supporter.avatar : SmallIcon }
157+
alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' }
158+
onError={ this._handleImgError } />}
159+
</a>
160+
))
161+
}
162+
163+
<div className="support__bottom">
164+
<a className="support__button" href="https://opencollective.com/webpack#support">
165+
Become a { rank === 'backer' ? 'backer' : 'sponsor' }
140166
</a>
141-
))
142-
}
143-
144-
<div className="support__bottom">
145-
<a className="support__button" href="https://opencollective.com/webpack#support">
146-
Become a { rank === 'backer' ? 'backer' : 'sponsor' }
147-
</a>
167+
</div>
148168
</div>
149-
</div>
169+
</VisibilitySensor>
150170
);
151171
}
152172

‎yarn.lock‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8940,6 +8940,13 @@ [email protected]:
89408940
resolved "https://registry.yarnpkg.com/react-tiny-popover/-/react-tiny-popover-3.4.2.tgz#ceee5662a3af64d4a9c3d46a28d71bb6f21738ee"
89418941
integrity sha512-3lH+GHvyJbjHNg14B7Md8bpUapQ5W3s8IdBFguODjrgEV1+LWrKOmVrpe8xhIQDOkgkiDfLwMVgsI7BQM9Udpg==
89428942

8943+
react-visibility-sensor@^5.0.2:
8944+
version "5.0.2"
8945+
resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.0.2.tgz#e360fff81572cb3a2a9fd680484447a9da09a55d"
8946+
integrity sha512-7+1lr7oQOO2vKr5u/uxoDGFWAAy7lsDy2aJU3Zy1/OymI+TRqOBk8m2L8YE1B0UyfCDWxVAWO+aifVGqNOvqeQ==
8947+
dependencies:
8948+
prop-types "^15.6.2"
8949+
89438950
react@^0.14.7:
89448951
version "0.14.9"
89458952
resolved "https://registry.yarnpkg.com/react/-/react-0.14.9.tgz#9110a6497c49d44ba1c0edd317aec29c2e0d91d1"

0 commit comments

Comments
 (0)