perf(docs): improve rendering performance of example's pages (#3549)

* wip * Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-React into improve/perf # Conflicts: # docs/src/components/ComponentDoc/ComponentProps/ComponentProps.js # docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js * restore changes * clean up * restore changes * clean up * optimizations * add note * update usage page
Semantic-Org · Apr 22, 2019 · 3f0c8ea · 3f0c8ea
1 parent ffa3874
commit 3f0c8ea
Show file tree

Hide file tree

Showing 36 changed files with 712 additions and 671 deletions.
diff --git a/docs/public/style.css b/docs/public/style.css
@@ -101,12 +101,16 @@ code:not(.hljs)::after {
   transform: scale(1.5);
 }
 
-#carbonads {
-  padding: 8px 8px;
-  line-height: 1.2;
+#docs-carbonads {
   background: #222;
   box-shadow: 0 0 2em black;
   border-top: 1px solid #444;
+  min-height: 150px;
+}
+
+#carbonads {
+  padding: 8px 8px;
+  line-height: 1.2;
 }
 
 #carbonads img {

diff --git a/docs/src/App.js b/docs/src/App.js
@@ -1,14 +1,46 @@
 import React from 'react'
 import { hot } from 'react-hot-loader/root'
-import { Router, Switch } from 'react-static'
+import { Route, Router, withSiteData } from 'react-static'
+import { Switch } from 'react-router'
 import Routes from 'react-static-routes'
 
-const App = () => (
-  <Router>
-    <Switch>
-      <Routes />
-    </Switch>
-  </Router>
+import Sidebar from './components/Sidebar/Sidebar'
+import style from './Style'
+import { docTypes } from './utils'
+
+const App = ({ componentMenu, versions }) => (
+  <div style={style.container}>
+    <Router>
+      <React.Fragment>
+        <Switch>
+          {/*
+           * We can't place <Sidebar /> inside of <Routes /> because it will be remounted on page
+           * switch. We also don't want to show <Sidebar /> for layouts pages and maximized pages.
+           */}
+          <Route path='/layouts/*' component={null} />
+          <Route path='/maximize/*' component={null} />
+
+          <Route path='/'>
+            {(props) => (
+              <Sidebar
+                {...props}
+                componentMenu={componentMenu}
+                style={style.menu}
+                version={versions.suir}
+              />
+            )}
+          </Route>
+        </Switch>
+
+        <Routes />
+      </React.Fragment>
+    </Router>
+  </div>
 )
 
-export default hot(App)
+App.propTypes = {
+  componentMenu: docTypes.componentMenu.isRequired,
+  versions: docTypes.versions,
+}
+
+export default hot(withSiteData(App))
diff --git a/docs/src/components/CarbonAd/CarbonAd.js b/docs/src/components/CarbonAd/CarbonAd.js
@@ -1,5 +1,7 @@
 import _ from 'lodash'
+import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+import { withRouter } from 'react-router-dom'
 
 import { isBrowser } from 'src/lib'
 
@@ -28,7 +30,23 @@ const waitForLoad = () => {
 }
 
 class CarbonAd extends Component {
+  static propTypes = {
+    location: PropTypes.object.isRequired,
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.location.pathname !== nextProps.location.pathname
+  }
+
   componentDidMount() {
+    this.loadAd()
+  }
+
+  componentDidUpdate() {
+    this.loadAd()
+  }
+
+  loadAd = () => {
     this.ifRef((ref) => {
       // always add the script as it is used to insert the ad
       ref.appendChild(script)
@@ -45,10 +63,6 @@ class CarbonAd extends Component {
     })
   }
 
-  shouldComponentUpdate() {
-    return false
-  }
-
   ifRef = (cb) => {
     const ref = document.querySelector('#docs-carbonads')
     if (ref) cb(ref)
@@ -59,4 +73,4 @@ class CarbonAd extends Component {
   }
 }
 
-export default CarbonAd
+export default withRouter(CarbonAd)
diff --git a/docs/src/components/CodeEditor/CodeEditor.js b/docs/src/components/CodeEditor/CodeEditor.js
@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import PropTypes from 'prop-types'
 import React from 'react'
 import Ace from 'react-ace'
 
@@ -96,12 +97,71 @@ const semanticUIReactCompleter = {
   },
 }
 
-const CodeEditor = (props) => (
-  <Ace
-    {...props}
-    name={`docs-editor-${_.uniqueId()}`}
-    enableBasicAutocompletion={[semanticUIReactCompleter]}
-  />
-)
+class CodeEditor extends React.Component {
+  editorRef = React.createRef()
+  name = `docs-editor-${_.uniqueId()}`
+
+  static propTypes = {
+    active: PropTypes.bool,
+    mode: PropTypes.oneOf(['html', 'json', 'jsx', 'sh']),
+    showCursor: PropTypes.bool,
+    value: PropTypes.string.isRequired,
+  }
+
+  static defaultProps = {
+    active: true,
+    mode: 'jsx',
+    showCursor: true,
+  }
+
+  componentDidMount() {
+    this.setCursorVisibility(this.props.showCursor)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.showCursor !== this.props.showCursor) {
+      this.setCursorVisibility(this.props.showCursor)
+    }
+
+    // focus editor when editor it becomes active
+    if (prevProps.active !== this.props.active && this.props.active) {
+      this.editorRef.current.editor.focus()
+    }
+  }
+
+  handleChange = _.debounce((value, e) => {
+    _.invoke(this.props, 'onChange', value, e)
+  }, 200)
+
+  setCursorVisibility = (visible) => {
+    const cursor = this.editorRef.current.editor.renderer.$cursorLayer.element
+
+    cursor.style.display = visible ? '' : 'none'
+  }
+
+  render() {
+    return (
+      <Ace
+        editorProps={{ $blockScrolling: Infinity }}
+        enableBasicAutocompletion={[semanticUIReactCompleter]}
+        enableLiveAutocompletion
+        height='100px'
+        highlightActiveLine
+        highlightGutterLine
+        name={this.name}
+        maxLines={Infinity}
+        onChange={this.handleChange}
+        readOnly={false}
+        ref={this.editorRef}
+        setOptions={{ fixedWidthGutter: true, showFoldWidgets: false }}
+        showPrintMargin={false}
+        tabSize={2}
+        theme='tomorrow_night'
+        width='100%'
+        {...this.props}
+      />
+    )
+  }
+}
 
 export default CodeEditor
diff --git a/docs/src/components/CodeEditor/CodeEditorUniveral.js b/docs/src/components/CodeEditor/CodeEditorUniveral.js
diff --git a/docs/src/components/CodeEditor/index.js b/docs/src/components/CodeEditor/index.js
@@ -1 +1,19 @@
-export default, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from './CodeEditorUniveral'
+import React from 'react'
+import { Loader } from 'semantic-ui-react'
+
+import NoSSR from 'docs/src/components/NoSSR'
+
+const CodeEditor = React.lazy(() => import('./CodeEditor'))
+
+const CodeEditorSafe = (props) => (
+  <NoSSR>
+    <React.Suspense fallback={<Loader active inline='centered' />}>
+      <CodeEditor {...props} />
+    </React.Suspense>
+  </NoSSR>
+)
+
+export const EDITOR_BACKGROUND_COLOR = '#1d1f21'
+export const EDITOR_GUTTER_COLOR = '#25282d'
+
+export default CodeEditorSafe
diff --git a/docs/src/components/CodeSnippet/CodeSnippet.js b/docs/src/components/CodeSnippet/CodeSnippet.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import CodeEditor, { EDITOR_BACKGROUND_COLOR } from 'docs/src/components/CodeEditor'
-import formatCode from '../../utils/formatCode'
+import formatCode from 'docs/src/utils/formatCode'
 
 const containerStyle = {
   padding: '1rem',
@@ -32,7 +32,7 @@ const formatters = {
 
 const CodeSnippet = ({ fitted, label, mode, value, ...rest }) => (
   <div style={{ ...containerStyle, margin: fitted ? 0 : '1rem 0' }}>
-    <div style={labelStyle}>{label || mode}</div>
+    {label === false ? null : <div style={labelStyle}>{label || mode}</div>}
 
     <CodeEditor
       highlightActiveLine={false}
@@ -49,7 +49,7 @@ const CodeSnippet = ({ fitted, label, mode, value, ...rest }) => (
 
 CodeSnippet.propTypes = {
   fitted: PropTypes.bool,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   mode: PropTypes.oneOf(['html', 'json', 'jsx', 'sh']),
   value: PropTypes.string.isRequired,
 }

diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.js b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.js
@@ -1,43 +1,38 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
-import universal from 'react-universal-component'
-import { Menu } from 'semantic-ui-react'
+import { Icon, Menu, Placeholder } from 'semantic-ui-react'
 
-import { isBrowser } from 'src/lib'
 import ComponentControlsCopyLink from './ComponentControlsCopyLink'
-import ComponentControlsEditCode from './ComponentControlsEditCode'
-import ComponentControlsMaximize from './ComponentControlsMaximize'
-import ComponentControlsShowHtml from './ComponentControlsShowHtml'
-
-const ComponentControlsCodeSandbox = isBrowser()
-  ? universal(import('./ComponentControlsCodeSandbox'), {
-      loading: () => (
-        <Menu.Item disabled icon={{ loading: true, name: 'spinner', title: 'Loading...' }} />
-      ),
-    })
-  : () => null
+import ComponentControlsCodeSandbox from './ComponentControlsCodeSandbox'
 
 const ComponentControls = (props) => {
-  const {
-    anchorName,
-    disableHtml,
-    exampleCode,
-    examplePath,
-    showHTML,
-    showCode,
-    onCopyLink,
-    onShowHTML,
-    onShowCode,
-  } = props
+  const { anchorName, exampleCode, examplePath, showCode, onCopyLink, onShowCode, visible } = props
+  const externalHref = `/maximize/${_.kebabCase(examplePath.split('/').slice(-1))}`
+
+  if (visible) {
+    return (
+      <Menu color='green' compact icon='labeled' size='tiny' text>
+        <Menu.Item active={showCode} onClick={onShowCode}>
+          <Icon color={showCode ? 'green' : 'grey'} fitted name='code' size='large' />
+          Try it
+        </Menu.Item>
+        <ComponentControlsCodeSandbox exampleCode={exampleCode} visible={visible} />
+        <Menu.Item href={externalHref} target='_blank'>
+          <Icon color='grey' fitted name='window maximize' size='large' />
+          Maximize
+        </Menu.Item>
+        <ComponentControlsCopyLink anchorName={anchorName} onClick={onCopyLink} />
+      </Menu>
+    )
+  }
 
   return (
-    <Menu color='green' compact icon='labeled' size='tiny' text>
-      <ComponentControlsEditCode active={showCode} onClick={onShowCode} />
-      <ComponentControlsShowHtml active={showHTML} disabled={disableHtml} onClick={onShowHTML} />
-      <ComponentControlsCodeSandbox exampleCode={exampleCode} />
-      <ComponentControlsMaximize examplePath={examplePath} />
-      <ComponentControlsCopyLink anchorName={anchorName} onClick={onCopyLink} />
-    </Menu>
+    <Placeholder>
+      <Placeholder.Line />
+      <Placeholder.Line />
+      <Placeholder.Line />
+    </Placeholder>
   )
 }
 
@@ -48,9 +43,8 @@ ComponentControls.propTypes = {
   examplePath: PropTypes.string,
   onCopyLink: PropTypes.func,
   onShowCode: PropTypes.func,
-  onShowHTML: PropTypes.func,
   showCode: PropTypes.bool,
-  showHTML: PropTypes.bool,
+  visible: PropTypes.bool,
 }
 
 export default React.memo(ComponentControls)