Perf improvements

Ives van Hoorne · Ives van Hoorne · commit 391ff82e0efc · 2017-11-15T14:10:59.000+01:00
diff --git a/src/homepage/src/components/LoadInView.js b/src/homepage/src/components/LoadInView.js
@@ -14,7 +14,7 @@ export default class LoadInView extends React.PureComponent {
   }
 
   listen = () => {
-    if (!this.state.show && this.elPos && getScrollPos().y + 300 > this.elPos) {
+    if (!this.state.show && this.elPos && getScrollPos().y + 100 > this.elPos) {
       requestAnimationFrame(() => {
         this.setState({ show: true });
       });
diff --git a/src/homepage/src/components/Navigation.js b/src/homepage/src/components/Navigation.js
@@ -71,13 +71,6 @@ export default () => (
         <StyledLogo width={50} height={50} />
       </Left>
       <Right>
-        <Item
-          href="https://medium.com/@compuives"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Examples
-        </Item>
         <Item
           href="https://medium.com/@compuives"
           target="_blank"
@@ -92,12 +85,7 @@ export default () => (
         >
           GitHub
         </Item>
-        <Item
-          href="https://github.com/CompuIves/codesandbox-client"
-          target="_blank"
-          rel="noopener noreferrer"
-          button
-        >
+        <Item href="/s" target="_blank" rel="noopener noreferrer" button>
           Create Sandbox
         </Item>
       </Right>
diff --git a/src/homepage/src/pages/index.js b/src/homepage/src/pages/index.js
@@ -8,7 +8,7 @@ import Footer from '../screens/home/Footer';
 import RecentPublications from '../screens/home/RecentPublications';
 
 export default () => (
-  <div style={{ marginBottom: 900 }} v>
+  <div>
     <Animation />
     <NPMFeature />
     <CycleFeature />
diff --git a/src/homepage/src/screens/home/Animation/Title.js b/src/homepage/src/screens/home/Animation/Title.js
@@ -124,7 +124,9 @@ export default ({ template }) => (
         </Button>
 
         <Button
-          href={sandboxUrl({ id: template.shortid })}
+          href={`https://codesandbox.io/search?refinementList%5Btemplate%5D%5B0%5D=${
+            template.name
+          }`}
           color={template.color}
           secondary
         >
diff --git a/src/homepage/src/screens/home/Animation/canvas/index.js b/src/homepage/src/screens/home/Animation/canvas/index.js
@@ -7,7 +7,7 @@ class Canvas {
   stage: HTMLCanvasElement;
   ctx: CanvasRenderingContext2D;
   dots: Array<Dot> = [];
-  waves: Array<Wave> = [];
+  wave: Wave = null;
 
   lastDelta: number = Date.now();
   cubeX: number = 1300;
@@ -41,14 +41,21 @@ class Canvas {
     }
   }
 
+  lowPerf = false;
+
   loop = () => {
     const now = Date.now();
     const delta = now - this.lastDelta;
-    if (getScrollPos(now).y > this.stage.height) {
+    if (getScrollPos(now).y > this.stage.height || delta < 33) {
       requestAnimationFrame(this.loop);
       return;
     }
 
+    if (delta > 2000) {
+      this.lowPerf = true;
+      this.dots = this.dots.filter(x => Math.random() > 0.5);
+    }
+
     this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
 
     let distX;
diff --git a/src/homepage/src/screens/home/Animation/index.js b/src/homepage/src/screens/home/Animation/index.js
@@ -75,17 +75,15 @@ export default class Animation extends React.PureComponent {
 
   startTimer = () => {
     this.timeout = setTimeout(() => {
-      requestAnimationFrame(() => {
-        if (!this.state.templateSelected) {
-          this.setState({
-            templateIndex:
-              (this.state.templateIndex + 1) % this.state.templates.length,
-          });
-
-          this.startTimer();
-        }
-      });
-    }, 5000);
+      if (!this.state.templateSelected) {
+        this.setState({
+          templateIndex:
+            (this.state.templateIndex + 1) % this.state.templates.length,
+        });
+
+        this.startTimer();
+      }
+    }, 6000);
   };
 
   setCanvas = canvas => {
diff --git a/src/homepage/src/screens/home/Footer.js b/src/homepage/src/screens/home/Footer.js
@@ -11,7 +11,9 @@ const Container = styled.div`
   padding-bottom: 3rem;
 `;
 
-const Column = styled.div`flex: 1;`;
+const Column = styled.div`
+  flex: 1;
+`;
 
 const Title = styled.h5`
   font-size: 1.125rem;
@@ -54,8 +56,8 @@ export default () => (
           <Title>CodeSandbox</Title>
           <List>
             <li>
-              <a href="/s/new" target="_blank" rel="noopener noreferrer">
-                Create A Sandbox
+              <a href="/s" target="_blank" rel="noopener noreferrer">
+                Create Sandbox
               </a>
             </li>
             <li>
@@ -74,16 +76,48 @@ export default () => (
         <Column>
           <Title>About</Title>
           <List>
-            <li>Blog</li>
-            <li>GitHub</li>
+            <li>
+              <a
+                href="https://medium.com/@compuives"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Blog
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/CompuIves/codesandbox-client"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                GitHub
+              </a>
+            </li>
           </List>
         </Column>
 
         <Column>
           <Title>Social</Title>
           <List>
-            <li>Twitter</li>
-            <li>Discord</li>
+            <li>
+              <a
+                href="https://twitter.com/codesandboxapp"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Twitter
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://discord.gg/KE3TbEZ"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Discord
+              </a>
+            </li>
           </List>
         </Column>
       </Container>

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export default class LoadInView extends React.PureComponent {`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`listen = () => {`
`17`		`- if (!this.state.show && this.elPos && getScrollPos().y + 300 > this.elPos) {`
	`17`	`+ if (!this.state.show && this.elPos && getScrollPos().y + 100 > this.elPos) {`
`18`	`18`	`requestAnimationFrame(() => {`
`19`	`19`	`this.setState({ show: true });`
`20`	`20`	`});`