From a7bf5c5d3988cdd29362116ca46dc83c7e92ff1d Mon Sep 17 00:00:00 2001
From: Juan Cabrera <juan.acc@gmail.com>
Date: Tue, 1 Aug 2017 13:20:52 -0400
Subject: [PATCH 1/2] feat(blog): fixing re-render and nesting on hightlight
 component, also added throttle to the main scroll listener

---
 src/app/components/app/index.js  | 4 ++--
 src/app/components/post/index.js | 3 +++
 src/app/lib/module-renderer.js   | 5 +----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/app/index.js b/src/app/components/app/index.js
index 1f73c4d48..d6128e583 100644
--- a/src/app/components/app/index.js
+++ b/src/app/components/app/index.js
@@ -5,7 +5,7 @@ import React from 'react';
 import Meta from "react-helmet";
 import TransitionManager from 'react-transition-manager';
 import classnames from 'classnames';
-import { get } from 'lodash';
+import { get, throttle } from 'lodash';
 import find from 'lodash/collection/find';
 import includes from 'lodash/collection/includes';
 import Flux from 'app/flux';
@@ -91,7 +91,7 @@ const App = React.createClass({
     this.getViewportDimensions();
 
     /* Get dimensions of viewport to calculate mousePosition and scrollPosition (for example) */
-    window.addEventListener('scroll', this.getDocumentScrollPosition);
+    window.addEventListener('scroll', throttle(() => this.getDocumentScrollPosition(), 240));
     /* Get new dimensions when device orientationchange etc */
     window.addEventListener('resize', this.getViewportDimensions);
 
diff --git a/src/app/components/post/index.js b/src/app/components/post/index.js
index 7d267b47b..0ea2d17e1 100644
--- a/src/app/components/post/index.js
+++ b/src/app/components/post/index.js
@@ -20,6 +20,9 @@ import ScrollWrapper from 'app/components/scroll-wrapper';
 
 const PagePost = React.createClass({
   mixins: [getScrollTrackerMixin('post')],
+  shouldComponentUpdate(nextProps, nextState) {
+    return !this.props.loaded;
+  },
   render() {
     const { post, footer, studios, currentPage, documentScrollPosition, viewportDimensions } = this.props;
     const category = get(post, '_embedded.wp:term.0.0', []);
diff --git a/src/app/lib/module-renderer.js b/src/app/lib/module-renderer.js
index 10dcb9ec6..4a49e7297 100644
--- a/src/app/lib/module-renderer.js
+++ b/src/app/lib/module-renderer.js
@@ -112,10 +112,7 @@ function renderVideo(moduleData, index, options) {
 }
 
 function renderCode(moduleData, index, options) {
-    var code = get(moduleData, 'attr.body.value').replace(/(?:\r\n|\r|\n)/g, '<br/>').replace(/ /g, '&nbsp;').replace('Button', ' Button ');
-    return (
-        <code className="hljs pf" dangerouslySetInnerHTML={{ __html: code }}></code>
-    );
+    return <CodeHighlighter code={get(moduleData, 'attr.body.value')} key={`logitem-${index}-${Date.now()}`} />
 }
 
 function renderModules(options) {

From fed4bd86d10181e26268a724ac2ff6ac01caf514 Mon Sep 17 00:00:00 2001
From: Phil Linnell <phil@ustwo.com>
Date: Thu, 10 Aug 2017 14:11:44 +0100
Subject: [PATCH 2/2] feat: Remove throttle on scroll listener and remove
 listener itself in post and caseStudy instead

---
 src/app/components/app/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/app/index.js b/src/app/components/app/index.js
index d6128e583..036e9acb6 100644
--- a/src/app/components/app/index.js
+++ b/src/app/components/app/index.js
@@ -5,7 +5,7 @@ import React from 'react';
 import Meta from "react-helmet";
 import TransitionManager from 'react-transition-manager';
 import classnames from 'classnames';
-import { get, throttle } from 'lodash';
+import { get } from 'lodash';
 import find from 'lodash/collection/find';
 import includes from 'lodash/collection/includes';
 import Flux from 'app/flux';
@@ -91,7 +91,9 @@ const App = React.createClass({
     this.getViewportDimensions();
 
     /* Get dimensions of viewport to calculate mousePosition and scrollPosition (for example) */
-    window.addEventListener('scroll', throttle(() => this.getDocumentScrollPosition(), 240));
+    if (!post || !caseStudy) {
+      window.addEventListener('scroll', this.getDocumentScrollPosition);
+    }
     /* Get new dimensions when device orientationchange etc */
     window.addEventListener('resize', this.getViewportDimensions);