perf(docs): improve doc examples performance (#3497)

* perf: remove example mouse listeners * perf: only re-render ads if necessary * docs: align menu sidebar to example on scroll
Semantic-Org · Mar 13, 2019 · 24bc22b · 24bc22b
1 parent 15f8285
commit 24bc22b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 53 deletions.
diff --git a/docs/public/style.css b/docs/public/style.css
@@ -54,6 +54,18 @@ code:not(.hljs)::after {
   content: '\00a0';
 }
 
+.docs-example {
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 2px #ccc;
+}
+.docs-example:hover {
+  box-shadow: 0 2px 8px #bbb;
+}
+.docs-example.active {
+  box-shadow: 0 8px 32px #aaa;
+}
+
 .docs-icon-set-column {
   cursor: pointer;
 }
@@ -106,6 +118,7 @@ code:not(.hljs)::after {
   font-size: 10px;
   color: #fff;
   opacity: 0.5;
+  white-space: nowrap;
 }
 .carbon-poweredby:hover {
   color: #ddd;

diff --git a/docs/src/components/CarbonAd/CarbonAdNative.js b/docs/src/components/CarbonAd/CarbonAdNative.js
@@ -1,12 +1,12 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
 import { Label } from 'semantic-ui-react'
 import { makeDebugger } from '../../../../src/lib'
 
 const debug = makeDebugger('carbon-ad-native')
 
-class CarbonAdNative extends Component {
+class CarbonAdNative extends PureComponent {
   static propTypes = {
     inverted: PropTypes.bool,
   }

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -1,3 +1,4 @@
+import cx from 'classnames'
 import copyToClipboard from 'copy-to-clipboard'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
@@ -68,8 +69,6 @@ class ComponentExample extends PureComponent {
     this.anchorName = examplePathToHash(examplePath)
 
     this.setState({
-      handleMouseLeave: this.handleMouseLeave,
-      handleMouseMove: this.handleMouseMove,
       showCode: this.isActiveHash(),
       sourceCode: this.getOriginalSourceCode(),
     })
@@ -124,22 +123,6 @@ class ComponentExample extends PureComponent {
     copyToClipboard(window && window.location.href)
   }
 
-  handleMouseLeave = () => {
-    this.setState({
-      isHovering: false,
-      handleMouseLeave: null,
-      handleMouseMove: this.handleMouseMove,
-    })
-  }
-
-  handleMouseMove = () => {
-    this.setState({
-      isHovering: true,
-      handleMouseLeave: this.handleMouseLeave,
-      handleMouseMove: null,
-    })
-  }
-
   handleShowCodeClick = (e) => {
     e.preventDefault()
 
@@ -207,32 +190,10 @@ class ComponentExample extends PureComponent {
       suiVersion,
       title,
     } = this.props
-    const {
-      error,
-      handleMouseLeave,
-      handleMouseMove,
-      htmlMarkup,
-      isHovering,
-      showCode,
-      showHTML,
-      sourceCode,
-    } = this.state
+    const { error, htmlMarkup, showCode, showHTML, sourceCode } = this.state
 
     const isActive = this.isActiveHash() || this.isActiveState()
 
-    const exampleStyle = {
-      position: 'relative',
-      background: '#fff',
-      boxShadow: '0 1px 2px #ccc',
-      ...(isActive
-        ? {
-          boxShadow: '0 8px 32px #aaa',
-        }
-        : isHovering && {
-          boxShadow: '0 2px 8px #bbb',
-        }),
-    }
-
     return (
       <Visibility
         once={false}
@@ -242,13 +203,7 @@ class ComponentExample extends PureComponent {
       >
         {/* Ensure anchor links don't occlude card shadow effect */}
         <div id={this.anchorName} style={{ paddingTop: '1rem' }}>
-          <Grid
-            className='docs-example'
-            padded='vertically'
-            onMouseLeave={handleMouseLeave}
-            onMouseMove={handleMouseMove}
-            style={exampleStyle}
-          >
+          <Grid className={cx('docs-example', { active: isActive })} padded='vertically'>
             <Grid.Row columns='equal'>
               <Grid.Column>
                 <ComponentExampleTitle

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleTitle.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleTitle.js
@@ -1,18 +1,22 @@
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
+import React, { Component } from 'react'
 import { Header, Label } from 'semantic-ui-react'
 
 const titleStyle = {
   margin: 0,
 }
 
-export default class ComponentExampleTitle extends PureComponent {
+export default class ComponentExampleTitle extends Component {
   static propTypes = {
     description: PropTypes.node,
     title: PropTypes.node,
     suiVersion: PropTypes.string,
   }
 
+  shouldComponentUpdate() {
+    return false
+  }
+
   render() {
     const { description, title, suiVersion } = this.props
     return (

diff --git a/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.js b/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.js
@@ -16,7 +16,7 @@ const sidebarStyle = {
 }
 
 const ComponentSidebar = ({ activePath, examplesRef, onItemClick, sections }) => (
-  <Sticky context={examplesRef} offset={15}>
+  <Sticky context={examplesRef} offset={14}>
     <Menu as={Accordion} fluid style={sidebarStyle} text vertical>
       {_.map(sections, ({ examples, sectionName }) => (
         <ComponentSidebarSection