Skip to content

Commit 58964d0

Browse files
author
Ives van Hoorne
committed
Perf improvements
1 parent 04eca60 commit 58964d0

File tree

13 files changed

+190
-188
lines changed

13 files changed

+190
-188
lines changed

‎src/homepage/src/components/LoadInView.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default class LoadInView extends React.PureComponent {
1414
}
1515

1616
listen = () => {
17-
if (!this.state.show && getScrollPos().y < this.elPos) {
17+
if (!this.state.show && this.elPos && getScrollPos().y + 300 > this.elPos) {
1818
requestAnimationFrame(() => {
1919
this.setState({ show: true });
2020
});

‎src/homepage/src/components/RollingText.js

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
11
import React from 'react';
2-
import styled from 'styled-components';
32

43
import { TimelineLite, TweenMax } from 'gsap';
54

6-
const FadeOut = styled.span`
7-
position: absolute;
8-
left: 0;
9-
`;
10-
11-
const FadeIn = styled.div`
12-
display: inline-block;
13-
width: inherit;
14-
`;
15-
165
export default class RollingText extends React.Component {
176
state = {
187
oldChildren: null,
@@ -54,29 +43,30 @@ export default class RollingText extends React.Component {
5443
}
5544

5645
render() {
57-
const { children, className, style, ...props } = this.props;
46+
const { children, className, style } = this.props;
5847
const oldChildren = this.oldChildren;
5948

6049
return (
6150
<div
6251
className={className}
6352
style={{ display: 'inline-block', position: 'relative', ...style }}
64-
{...props}
6553
>
66-
<FadeOut
67-
innerRef={el => {
54+
<div
55+
style={{ position: 'absolute', left: 0 }}
56+
ref={el => {
6857
this.fadeout = el;
6958
}}
7059
>
7160
{oldChildren}
72-
</FadeOut>
73-
<FadeIn
74-
innerRef={el => {
61+
</div>
62+
<div
63+
style={{ display: 'inline-block', width: 'inherit' }}
64+
ref={el => {
7565
this.fadein = el;
7666
}}
7767
>
7868
{children}
79-
</FadeIn>
69+
</div>
8070
</div>
8171
);
8272
}

‎src/homepage/src/pages/index.js

Lines changed: 11 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,19 @@
11
import React from 'react';
2-
import styled from 'styled-components';
32

4-
import Fullscreen from 'app/components/flex/Fullscreen';
5-
import Centered from 'app/components/flex/Centered';
6-
import Relative from 'app/components/Relative';
7-
8-
import * as templates from 'common/templates';
9-
10-
import Media from 'react-media';
11-
12-
import HomeTitle from '../screens/home/Title';
13-
import Cubes from '../screens/home/Cubes';
14-
import Frameworks from '../screens/home/Frameworks';
15-
import Background from '../screens/home/Background';
3+
import Animation from '../screens/home/Animation';
164
import NPMFeature from '../screens/home/NPMFeature';
175
import CycleFeature from '../screens/home/CycleFeature';
186
import ExtraFeatures from '../screens/home/ExtraFeatures';
197
import Footer from '../screens/home/Footer';
208
import RecentPublications from '../screens/home/RecentPublications';
219

22-
import media from '../utils/media';
23-
24-
const Container = styled(Centered)`
25-
position: relative;
26-
width: 100%;
27-
height: 100vh;
28-
flex: auto;
29-
flex-direction: row;
30-
margin: 0 auto;
31-
max-width: 1280px;
32-
padding: 0px 1.0875rem 1.45rem;
33-
padding-top: 0;
34-
35-
${media.tablet`
36-
display: block;
37-
flex-direction: column;
38-
margin-top: 6rem;
39-
margin-bottom: 8rem;
40-
41-
height: initial;
42-
`};
43-
`;
44-
45-
const Message = styled.div`
46-
text-align: center;
47-
font-weight: 200;
48-
49-
color: white;
50-
font-size: 2.5rem;
51-
max-width: 1000px;
52-
line-height: 1.2;
53-
margin-bottom: 4rem;
54-
55-
margin-right: 2rem;
56-
margin-left: 2rem;
57-
58-
${media.phone`
59-
font-size: 1.25rem;
60-
`};
61-
`;
62-
63-
class IndexPage extends React.PureComponent {
64-
state = {
65-
templates: Object.keys(templates)
66-
.filter(k => k !== 'default' && k !== '__esModule')
67-
.map(tem => templates[tem])
68-
.filter(tem => tem.Icon),
69-
templateIndex: 0,
70-
templateSelected: false,
71-
canvas: null,
72-
};
73-
74-
componentDidMount() {
75-
this.startTimer();
76-
}
77-
78-
componentWillUnmount() {
79-
clearTimeout(this.timeout);
80-
}
81-
82-
startTimer = () => {
83-
this.timeout = setTimeout(() => {
84-
requestAnimationFrame(() => {
85-
if (!this.state.templateSelected) {
86-
this.setState({
87-
templateIndex:
88-
(this.state.templateIndex + 1) % this.state.templates.length,
89-
});
90-
91-
this.startTimer();
92-
}
93-
});
94-
}, 5000);
95-
};
96-
97-
setCanvas = canvas => {
98-
this.setState({ canvas });
99-
};
100-
101-
selectTemplate = template => {
102-
this.setState({
103-
templateIndex: this.state.templates.indexOf(template),
104-
templateSelected: true,
105-
});
106-
};
107-
108-
render() {
109-
const template = this.state.templates[this.state.templateIndex];
110-
return (
111-
<div style={{ marginBottom: 900 }} v>
112-
<Relative>
113-
<Fullscreen>
114-
<Background
115-
templateIndex={this.state.templateIndex}
116-
template={template}
117-
setCanvas={this.setCanvas}
118-
/>
119-
<Container horizontal>
120-
<HomeTitle template={template} />
121-
<Media query="(min-width: 1280px)">
122-
<Cubes
123-
canvas={this.state.canvas}
124-
templates={this.state.templates}
125-
template={template}
126-
setTemplate={this.selectTemplate}
127-
/>
128-
</Media>
129-
</Container>
130-
</Fullscreen>
131-
<Centered horizontal>
132-
<Message>
133-
CodeSandbox is an online editor that helps you create web
134-
applications, from prototype to deployment.
135-
</Message>
136-
</Centered>
137-
<Frameworks templates={this.state.templates} />
138-
</Relative>
139-
<NPMFeature />
140-
<CycleFeature />
141-
<ExtraFeatures />
142-
<RecentPublications />
143-
<Footer />
144-
</div>
145-
);
146-
}
147-
}
148-
149-
export default IndexPage;
10+
export default () => (
11+
<div style={{ marginBottom: 900 }} v>
12+
<Animation />
13+
<NPMFeature />
14+
<CycleFeature />
15+
<ExtraFeatures />
16+
<RecentPublications />
17+
<Footer />
18+
</div>
19+
);

‎src/homepage/src/screens/home/Background.js renamed to ‎src/homepage/src/screens/home/Animation/Background.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const Container = styled.div`
1414
bottom: 0;
1515
right: 0;
1616
left: 0;
17-
z-index: 0;
1817
pointer-events: none;
1918
${delay};
2019
`;

‎src/homepage/src/screens/home/Cubes.js renamed to ‎src/homepage/src/screens/home/Animation/Cubes.js

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import styled from 'styled-components';
44
import { TimelineMax, TweenMax, Power2, Power3, Elastic } from 'gsap';
55
import fadeIn from 'app/utils/animation/fade-in';
66

7-
import Cube from '../../components/Cube';
8-
import media from '../../utils/media';
9-
import getScrollPos from '../../utils/scroll';
7+
import Cube from '../../../components/Cube';
8+
import media from '../../../utils/media';
9+
import getScrollPos from '../../../utils/scroll';
1010

1111
const RADIUS = 300;
1212
const Container = styled.div`
@@ -29,17 +29,14 @@ const Container = styled.div`
2929

3030
const SmallCube = styled(
3131
class SmallCubeInner extends React.Component {
32-
shouldComponentUpdate(nextProps) {
33-
return nextProps.selected !== this.props.selected;
32+
shouldComponentUpdate() {
33+
return false;
3434
}
3535

3636
render() {
37+
const { cubeRef, ...props } = this.props;
3738
return (
38-
<div
39-
style={{ willChange: 'transform' }}
40-
ref={this.props.cubeRef}
41-
{...this.props}
42-
/>
39+
<div style={{ willChange: 'transform' }} ref={cubeRef} {...props} />
4340
);
4441
}
4542
}
@@ -114,7 +111,10 @@ export default class Cubes extends React.PureComponent {
114111

115112
componentDidMount() {
116113
requestAnimationFrame(() => {
117-
this.growCube(this.props.template, this.props.canvas);
114+
this.growCube(this.props.template, this.props.canvas).add(
115+
this.updateCubePos,
116+
'-=.7'
117+
);
118118
});
119119

120120
this.lastTick = Date.now();
@@ -151,12 +151,17 @@ export default class Cubes extends React.PureComponent {
151151
}
152152
}
153153

154+
shouldComponentUpdate() {
155+
return false;
156+
}
157+
154158
growTimelines = {};
155159
shrinkTimelines = {};
156160

157161
growCube = (template, canvas) => {
158162
const el = this.els[template.name];
159-
const rgb = template.color.lighten(0)()
163+
const rgb = template.color
164+
.lighten(0)()
160165
.match(/rgb\((.*)\)/)[1]
161166
.split(',');
162167
const { x, y } = this.state.templates.find(x => x.template === template);
@@ -173,8 +178,7 @@ export default class Cubes extends React.PureComponent {
173178
if (canvas) {
174179
canvas.makeWave(canvas.cubeX, canvas.cubeY, rgb);
175180
}
176-
}, '-=.7')
177-
.add(this.updateCubePos, '-=.7');
181+
}, '-=.7');
178182

179183
return this.growTimelines[template.name].restart();
180184
};

‎src/homepage/src/screens/home/Title.js renamed to ‎src/homepage/src/screens/home/Animation/Title.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import styled from 'styled-components';
33

44
import { sandboxUrl } from 'app/utils/url-generator';
55

6-
import media from '../../utils/media';
7-
import { fadeIn } from '../../utils/animation';
8-
import RollingText from '../../components/RollingText';
9-
import Button from '../../components/Button';
6+
import media from '../../../utils/media';
7+
import { fadeIn } from '../../../utils/animation';
8+
import RollingText from '../../../components/RollingText';
9+
import Button from '../../../components/Button';
1010

1111
const Container = styled.div`
1212
color: white;
@@ -98,13 +98,12 @@ const Secondary = styled.div`
9898
transition: 0.3s ease color;
9999
display: inline-block;
100100
${fadeIn(0.2)};
101-
color: ${props => props.color || props.template.secondary};
102101
`;
103102

104103
export default ({ template }) => (
105104
<Container>
106105
<Title>
107-
<Secondary color={template.color}>Code</Secondary>
106+
<Secondary style={{ color: template.color() }}>Code</Secondary>
108107
<Primary>Sandbox</Primary>
109108
</Title>
110109
<SubTitle>

‎src/homepage/src/screens/home/canvas/Dot.js renamed to ‎src/homepage/src/screens/home/Animation/canvas/Dot.js

File renamed without changes.

‎src/homepage/src/screens/home/canvas/PositionedElement.js renamed to ‎src/homepage/src/screens/home/Animation/canvas/PositionedElement.js

File renamed without changes.

‎src/homepage/src/screens/home/canvas/Wave.js renamed to ‎src/homepage/src/screens/home/Animation/canvas/Wave.js

File renamed without changes.

‎src/homepage/src/screens/home/canvas/index.js renamed to ‎src/homepage/src/screens/home/Animation/canvas/index.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import getScrollPos from '../../../utils/scroll';
1+
import getScrollPos from '../../../../utils/scroll';
22

33
import Dot from './Dot';
44
import Wave from './Wave';
@@ -44,7 +44,7 @@ class Canvas {
4444
loop = () => {
4545
const now = Date.now();
4646
const delta = now - this.lastDelta;
47-
if (getScrollPos(now).y > this.stage.height || delta < 30) {
47+
if (getScrollPos(now).y > this.stage.height) {
4848
requestAnimationFrame(this.loop);
4949
return;
5050
}
@@ -138,8 +138,8 @@ class Canvas {
138138
const distance = Math.sqrt(distX * distX + distY * distY);
139139

140140
this.dots[i].setSpeed(
141-
distX / distance / 20 * ((Math.random() + 0.1) * 0.2),
142-
distY / distance / 20 * ((Math.random() + 0.1) * 0.2)
141+
distX / distance / 40 * ((Math.random() + 0.1) * 0.2),
142+
distY / distance / 40 * ((Math.random() + 0.1) * 0.2)
143143
);
144144
}
145145
this.calibrated = true;

0 commit comments

Comments
 (0)